html - 更改悬停状态图标的颜色

Question

我在 <li> 里面有一个侧边菜单标签 我有一个图标和一个文本。当鼠标悬停时，我希望图标变为白色。现在只有文本变为白色。我读过其他帖子，但都没有用。

没有悬停[正常状态]

悬停[悬停状态]

<li>
   <a href="#">
      <span class="icon-patient"></span>
   </a>
   <p>Paciente</p>
 </li>

li p {
font-size: 0.8em;
}

li span {
font-size: 1.8em;
}

li span:hover {
color: #fff;
}

li a:hover {
text-decoration: none;
}

ul li:hover {
background-color: #5D9CF3;
cursor: pointer;
color: #fff;
transform: perspective(1px) translateZ(0);
transition-duration: 0.25s;
transition-property: background-color;
}

Answer 1

试试这个:

li:hover span {
 color: #fff!important;
}

如果这对您没有帮助，您的图标不是字体。

如果它不起作用并且它是一种字体，我们可以尝试这个解决方案:

li:hover a {
 color: #fff!important;
}
li:hover a span{
 color: inherit;
}