Css 字体颜色真棒赢了'；悬停时不要改变

我有一点css，可以在鼠标悬停时更改光标，但不能更改颜色。 为什么光标会改变，但颜色不会改变

.fa-star-o:hover {
    cursor: pointer;
    color: red;
}

这里是一些html。看起来有点像这样

<div id=@Model.ProfileImages.ElementAt(i).BandyProfileImageId class="item profile-image-item">
     <img style="position: relative; left: 0; top: 0;" src="data:image/jpg;base64, @(Html.Raw(Convert.ToBase64String(Model.ProfileImages.ElementAt(i).ImageThumbnailCropped)))" alt="no profile images">
     <i style="z-index: 200; position: absolute; top: 5px; right: 5px; color: whitesmoke;" class="fa fa-trash-o fa-2x trashImage"></i>
     <i style="z-index: 200; position: absolute; top: 5px; right: 35px; color: yellow;" class="fa fa-star-o fa-2x"></i>
</div>

---

问题在于您正在使用内嵌样式设置图标的颜色。除非使用

，否则样式表中的样式不会更改这些内容！重要信息

。如果我使用这个，它对我有效：

.fa-star-o:hover {
    cursor: pointer;
    color: red !important;
}

看

也就是说，最好将所有内联样式移到样式表中，并避免使用

！重要信息

---

编辑：顺便说一句，这是您想要避免

的原因！重要信息

如果可能，可能会使调试变得困难，因为CSS不再像预期的那样层叠，如果您或任何其他人希望在将来覆盖悬停颜色，您/他们将不得不使用

！再次强调

，它会变成一个恶性循环。

我需要HTML的其余部分来检查它。然而，我自己编写了一段HTML代码，添加了CSS，效果很好。看：

CSS:

HTML:

<i class="fa fa-star-o">Hi</i>

Hi

---

最后是JSFIDLE:

这是因为大家都说的

内联

样式<代码>内联优先于

类

或

ids

（除非您添加了！重要信息）

：hover

是一个伪类，因此它也优先于

：hover

这里有一个小例子，你可以看到

.fa-star-o:悬停{
光标：指针；
颜色：红色；
}
.stdColor{
颜色：灰色；
}

不能在html中编写参数“color”。一旦从html中删除“color:yellow；”，一切都会正常工作。对这样的样式只使用css文件，不会有问题

CSS:

.fa-star-o{颜色：黄色；}
.fa-star-o:悬停{
光标：指针；
颜色：红色；
}

HTML:

hi
（i） .BandyProfileImageId class=“项目配置文件图像项目”>
你好
你好

将此CSS文件的链接（在其中写入上述CSS）移动到其他CSS链接的底部

---

这将起作用。

对我有效：这是因为使用

style=“…”

内联定义的样式覆盖了任何css文件中定义的样式。您应该考虑将内联CSS移动到专用样式表。因此，内联颜色在这里覆盖了悬停？我以为它们是不同的css样式？是的，我明白了。我只是做了些改变，效果很好。但现在我想知道这是否会影响其他页面上的任何其他字体超级图标？@user1186050这只会影响具有

.fa-star-o

类的图标。顺便说一句，您想要避免的原因是

！重要信息

如果可能，可能会使调试变得困难，因为CSS不再像预期的那样层叠，如果您或任何其他人希望在将来覆盖悬停颜色，您/他们将不得不使用

！重要提示

再次出现，这将成为一个恶性循环。颜色不在html中，而在样式中。我当然可以！是的！所以我也不确定你指的是什么。

<i class="fa fa-star-o">Hi</i>

<style>
    .fa-star-o{color:yellow;}
    .fa-star-o:hover {
        cursor: pointer;
        color: red;
    }
</style>

<i class="fa fa-star-o fa-2x">hi</i> 

(i).BandyProfileImageId class="item profile-image-item">

<img style="position: relative; left: 0; top: 0;" src="data:image/jpg;base64, @(Html.Raw(Convert.ToBase64String(Model.ProfileImages.ElementAt(i).ImageThumbnailCropped)))" alt="no profile images">

<i style="z-index: 200; position: absolute; top: 5px; right: 5px;" class="fa fa-trash-o fa-2x trashImage">hi</i>

<i style="z-index: 200; position: absolute; top: 5px; right: 35px; " class="fa fa-star-o fa-2x">hi</i>