悬停时更改 Material 图标颜色

Question

我正在使用这个演示，希望在悬停时更改图标的颜色。

.demo-navigation .mdl-navigation__link .material-icons:hover {
  background-color: #00BCD4;
  color: #FFF;
}

但是没有起作用。有没有办法实现这个目标？

- Sergino

---

你能提供你想要更改的元素的HTML代码吗？ - spaniard

Answer 1

Here is the correct code:

    .demo-navigation .mdl-navigation__link:hover .material-icons {
      background-color: #00BCD4;
      color: #FFF;
    }

首先，您需要将 :hover 设置在链接类上而不是图标类上。其次，您必须使用 !important，因为有一个不同的类 (.mdl-color-text--blue-grey-400) 正在使用 !important，您必须覆盖它。

- Mr. Smee

---

在我的情况下，其他解决方案中提到的 !important 颜色没有任何效果。改变 :hover 子句的位置才是对我有效的。 - Interesting

Answer 2

您需要在颜色上添加!important，因为该图标具有一个类（mdl-color-text--blue-grey-400），该类还使用!important添加了灰色颜色

- gabesoft

---

基本上这应该可以工作：color: #FFF !important; - gabesoft

Answer 3

i 标签上的 mdl-color-text--blue-grey-400 类需要在更改其颜色时使用 !important。

- wrahim

Answer 4

在您的 CSS 中，为 :hover 规则添加 !important 关键词。

.your-icon-class {
  transition: all 300ms; // if you want the color to gradually change
}

.your-icon-class:hover {
  color: #FFF !important;
}

- ob1