我正在使用这个演示,希望在悬停时更改图标的颜色。
.demo-navigation .mdl-navigation__link .material-icons:hover {
background-color: #00BCD4;
color: #FFF;
}
但是没有起作用。有没有办法实现这个目标?
我正在使用这个演示,希望在悬停时更改图标的颜色。
.demo-navigation .mdl-navigation__link .material-icons:hover {
background-color: #00BCD4;
color: #FFF;
}
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
,您必须覆盖它。!important
颜色没有任何效果。改变 :hover
子句的位置才是对我有效的。 - Interesting您需要在颜色上添加!important,因为该图标具有一个类(mdl-color-text--blue-grey-400),该类还使用!important添加了灰色颜色
color: #FFF !important;
- gabesofti
标签上的 mdl-color-text--blue-grey-400
类需要在更改其颜色时使用 !important
。
:hover
规则添加 !important
关键词。.your-icon-class {
transition: all 300ms; // if you want the color to gradually change
}
.your-icon-class:hover {
color: #FFF !important;
}