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

我有一个侧面菜单，在<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;
}

最佳答案

尝试这个：

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

如果这样做不起作用，则您的图标不是字体。

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

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