Html 更改悬停状态图标的颜色

我有一个侧菜单，在

标记中有一个图标和一个文本。 当鼠标悬停时，我希望图标变为白色。现在只有文本变为白色。我读过其他帖子，但没有一篇有效

无悬停[正常状态]

带悬停[悬停状态]

帕森特


李平{
字号：0.8em；
}
李斯潘{
字号：1.8em；
}
李斯潘：悬停{
颜色：#fff；
}
李娜：停下来{
文字装饰：无；
}
ulli：悬停{
背景色：#5D9CF3；
光标：指针；
颜色：#fff；
变换：透视图（1px）translateZ（0）；
过渡时间：0.25s；
过渡特性：背景色；
}

试试这个：

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

如果这没有帮助，你的图标不是字体

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

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

---

我想试试这样的东西：

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:hover标记，例如，“当li未悬停时，但嵌套的a是”，这意味着没有显示li:hover。这些标签将鼠标悬停在li上。我想你甚至可以在两者上都悬停，所以li:hover a:hover，但我自己还没有尝试过。

我使用了你的代码，并使用提供的图像更改了一点CSS，只是为了悬停效果

你能检查一下这是否是你想要实现的吗

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;
}

---

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

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

---

我不是100%确定你的代码出了什么问题，但是chrome中的inspect工具（ctrl+shift+I）有助于调试。您可以转到页面的各个元素并对其进行操作。我一直在用它来做css工作，因为你可以定义你想要的css，并实时查看它（例如，在你悬停时播放css，直到它显示出你想要的内容，并将其转储到悬停定义中）。此外，在我的脑海中，我会定义一个悬停，用于你想要定位的最外层标记（例如li）然后在不使用悬停装饰器的情况下，使用悬停期间所需的更改将其他标记嵌套在其中。我不确定它是否会起作用，但这是我要尝试的第一件事。我如何才能做到这一点？听起来像是一个解决方案。有没有地方可以让我检查字体？这是我创建的IcoMoon字体。你可以在这里看到一个截图

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