我有一个带元素符号的简单列表。我想在悬停时更改元素符号和文本的颜色。只有文本会改变颜色，元素符号不会。这是 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; }
最佳答案
您可以使用 CSS 伪元素实现类似于您正在寻找的东西，具体取决于您想要的元素符号样式以及是否可以使用 unicode 字符实现。
使用 list-style: none; 并用 CSS 伪元素内容替换元素符号可以让您控制颜色。
我已经将一个 jsBin 与一个小示例放在一起，这可能会帮助您解决问题 here .
您将在示例中看到，我根据类为不同的列表项涂上了不同的颜色，然后悬停时每个元素都会显示橙色元素符号和文本。
您还可以运行以下代码段；
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>希望对您有所帮助!
关于html - 如何使用 CSS 将鼠标悬停在包括元素符号在内的整个列表元素上？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32575509/