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

Question

I have a simple list with bullets. 我有一个简单的子弹清单。 I would like to change the color of both the bullet and the text when hovered over. 悬停时，我想更改项目符号和文本的颜色。 Only the text change color and not the bullet. 只有文本会更改颜色，项目符号不会更改。 Here is the HTML and CSS: 这是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

You could achieve something similar to what you're looking for with CSS pseudo elements depending on the bullet style you want and if that can be achieved with a unicode character. 根据所需的项目符号样式，以及是否可以使用unicode字符来实现，您可以使用CSS伪元素来实现与您想要的东西相似的东西。

Using list-style: none; 使用list-style: none; and replacing the bullets with CSS pseudo element content gives you control over the color. 并用CSS伪元素内容替换项目符号可让您控制颜色。

I've put together a jsBin with a small example that might be able to help you out here . 我整理了一个jsBin和一个小例子，也许可以在这里为您提供帮助。

You'll see in the example, I've colored the different list items different colors based on a class and then on hover each of them will show an orange bullet and text. 您将在示例中看到，我根据类为不同的列表项着色了不同的颜色，然后将它们悬停在每个列表项上将显示橙色的项目符号和文本。

You can also run the following snippet; 您还可以运行以下代码段；

 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>

Hope that helps you out! 希望对您有所帮助！

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

问题描述

1 个解决方案

解决方案1
2 已采纳 2015-09-14 23:52:41

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

问题描述

1 个解决方案

解决方案1 2 已采纳 2015-09-14 23:52:41

解决方案1
2 已采纳 2015-09-14 23:52:41