在悬停时更改材质图标颜色

Question

我正在使用此demo并希望在悬停时更改图标颜色

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

但没有工作。有没有办法实现这个目标？

Answer 1

您必须在颜色上添加！important，因为该图标有一个类（mdl-color-text - blue-grey-400），它还添加了重要的灰色

Answer 2

这是正确的代码：

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

首先，您需要在链接类上设置:hover而不是图标类。其次，您必须使用!important，因为您必须覆盖使用.mdl-color-text--blue-grey-400的其他类（!important）。

Answer 3

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

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