更改悬停状态图标的颜色答案

【问题标题】：Change color for hover state icon更改悬停状态图标的颜色
【发布时间】：2018-11-30 01:00:15
【问题描述】：

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

【问题讨论】：

我不是 100% 确定您的代码出了什么问题，但有助于调试的是 chrome 中的检查工具（ctrl + shift + i）。您可以转到页面的各个元素并对其进行操作。我一直使用它来做 css 工作，因为您可以定义所需的 css，并实时查看（例如，玩 css 直到它在悬停时显示您想要的内容，然后将其转储到悬停定义中）。
另外，在我的脑海中，我会为你想要定位的最外层标签（例如 li）定义一个悬停，然后将其他标签嵌套在其中，并在没有悬停装饰器的悬停。不确定它是否会起作用，但这是我会尝试的第一件事
我怎样才能做到这一点？听起来像是一个解决方案。

标签： html css icons frontend

【解决方案1】：

试试这个：

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

如果这无济于事，您的图标不是字体。

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

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

【讨论】：

有地方可以检查字体吗？
这是我创建的 IcoMoon 字体。你可以在这里看到截图imgur.com/a/KHnxDsM

【解决方案2】：

我会尝试这样的：

li p {
  font-size: 0.8em;
}

li span {
  font-size: 1.8em;
}

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

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

li:hover span {
  color: #fff;
}

我对正在发生的事情的直觉是 css 解释器正在查看您的 li a:hover 标签，例如，“当 li 没有悬停时，但是嵌套的 a 是”，这意味着 li:hover 不是显示。这些标签将鼠标悬停在 li 上。我认为您甚至可以将鼠标悬停在两者上，所以 li:hover a:hover，但我自己还没有尝试过。

【讨论】：

【解决方案3】：

我使用了您的代码，并使用提供的图像更改了一些 CSS，仅用于悬停效果。

您能检查一下这是否是您想要实现的目标吗？

https://codepen.io/alexandrecanijo/pen/jKzVwK

CSS 是这样的：

.link p {
    font-size: 0.8em;
    margin-top: 20px;
}

.link span {
    font-size: 1.8em;
}

.link {
    display: block;
    width: 80px;
    height: 80px;
    background: #fff;
    text-align: center;
    padding: 5px;
    text-decoration: none;
}

.link:hover {
    cursor: pointer;
    background: #5D9CF3;
    color: #fff;
    transition-duration: 0.25s;
    transition-property: background-color;
}

.icon-patient {
    margin: 0 auto;
    width: 20px;
    height: 20px;
    display: block;
}

.icon-patient:before {
    font-family: "Font Awesome 5 Free";
    content: "\f007";
}

.link:hover .icon-patient:before {
    color: #fff;
}

【讨论】：

【解决方案4】：

你可以试试这个。它对我有用：

li a span:hover{
  color: #fff;
}

【讨论】：