如何使用 CSS 将鼠标悬停在包括项目符号在内的整个列表元素上？

Question

我有一个带项目符号的简单列表。我想在悬停时更改项目符号和文本的颜色。只有文本会改变颜色，项目符号不会。这是 HTML 和 CSS:

<div id="navtop">
    <ul>
    <a href="calendar.html" > 
    <li>Calendar </li>   </a>   
    </ul>
</div>      




#navtop {
     float: right;
     width: 650px;
     font-size: 1.2em;
     padding-left: 30px;    
    padding-bottom: 0px;
    height: 65px;
}


#navtop ul {
    margin-top: 20px;
    margin-left: 70px;

}

#navtop li {
    float: left;
    position: relative;
    padding-left: 10px;
    width: 280px;
}

#navtop a,  #navtop ul  {
    color: #ffd; 
    }


#navtop  ul a:hover ,   
#navtop ul a:active,
#navtop ul  li:hover,
navtop ul li:active 
{color:#f93; }

#navtop ul a:hover  li{
    color:#f93; }

Answer 1

您可以使用 CSS 伪元素实现类似于您正在寻找的东西，具体取决于您想要的项目符号样式以及是否可以使用 unicode 字符实现。

使用 list-style: none; 并用 CSS 伪元素内容替换项目符号可以让您控制颜色。

我整理了一个 jsBin 和一个小示例，可能会对您有所帮助 here。

您将在示例中看到，我根据 class 为不同的列表项涂上了不同的颜色，然后在悬停时每个项目都会显示橙色项目符号和文本。

您还可以运行以下代码段；

ul {
    list-style: none;
    padding   : 0;
}

li { 
    padding-left: 16px; 
    position: relative;
}

li:before {
    position: absolute;
    left   : 4px;
    content: "•";
}
li.is--red:before {
  color: red;
}
li.is--green,
li.is--green:before {
  color: green;
}
li:hover,
li:hover:before {
  color: orange;
}

<!DOCTYPE html>
<head></head>
<body>
  <ul>
    <li class="is--red"><a>Some link</a></li>
    <li class="is--green"><a>Some other link</a></li>
    <li><a>Some other link</a></li>
  </ul>
</body>

希望对您有所帮助！

如何使用 CSS 将鼠标悬停在包括项目符号在内的整个列表元素上？

how can I use CSS to hover over an entire list element including the bullet?

html

css

hover