字体真棒图标悬停效果不起作用

Question

开发一个网站并使用几个字体真棒图标。 需要能够在用户将鼠标悬停在一个颜色上时更改它们的颜色。

这是我的css，使它们在悬停时改变颜色

.icon:hover {
  color: blue;
}

这是创建图标的位置

<i id="mod_squad" class="x-icon icon x-icon-angle-right" style="text-align: center; color: rgb(25, 25, 25); font-size: 25px;" data-x-icon="&#xf105;" aria-hidden="true"></i>

Answer 1

这个问题来自内联CSS样式始终优先于外部CSS样式的事实。

一个简单的解决方法是在要在 CSS 中覆盖的属性后添加!important：

.test:hover {
  color: blue !important;
}

<span class="test" style="color: red;">Lorem Ipsum</span

重要提示：这不是推荐的方法，但是，我强烈建议您将内联CSS移动到外部CSS样式中。