如何更改 <li> 将项目符号图标悬停在标签上时？

Question

在我的<ul>列表中，我有几个带有<a>标记的<li> 。

悬停在<a>标记上时，我想更改li项目符号图标的颜色（我的意思是<li>旁边的项目符号）

我试过了

a:hover {
    color:red;
}

但这不会影响<li>项目符号图标。

我也试过

ul li:hover{
    color:red;
}

但这并不完美，因为当鼠标移至<a>标签附近而不是<li> ，项目符号开始改变颜色。

Answer 1

您的代码实际上为我工作。

<ul>
  <li>
    <a href="#">A</a>
  </li>
  <li>
    <a href="#">B</a>
  </li>
  <li>
    <a href="#">C</a>
  </li>
</ul>

CSS：

ul li:hover{
  color:red;
}

小提琴： https : //jsfiddle.net/tox9je8n/

Answer 2

我已经尝试了一些与您的问题有关的方法，并且效果很好。 要解决li：hover不能悬停链接的问题，应将display：block设置为如下所示，以使其具有全宽。

 ul li a { color: black; display: block } ul li:hover { color: red; } ul li:hover a { color: black; } 

 <ul> <li><a href="#">Value 1</a></li> <li><a href="#">Value 2</a></li> <li><a href="#">Value 3</a></li> </ul>