Question

我有一些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>

Answer 1

问题是您要使用内联样式设置图标的颜色。除非使用!important，否则样式表中的样式不会更改这些样式。如果我使用它，它对我有用：

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

请参阅this fiddle。

话虽如此，最好将所有内联样式移到样式表中，避免使用!important。

编辑：顺便说一下，您希望在可能的情况下避免!important的原因是它可能会使调试变得困难，因为CSS不再按预期级联，如果您或其他任何人想要在将来覆盖悬停颜色，你/他们将不得不再次使用!important，这将成为一个恶性循环。

Answer 2

我需要HTML的其余部分来检查它。但是，我自己编写了一段HTML来添加你的CSS并且它有效。看：

CSS：

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

HTML：

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

最后是jsfiddle：http://jsfiddle.net/b22LneLz/5/

Answer 3

这是因为每个人都说inline样式。 Inline优先于classes或ids（除非您添加！important ）。 :hover是伪类，因此它也优先于:hover。

这是一个小例子，你可以看到它

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

<a class="fa-star-o" style="color: gray" href="www.google.com"> Inline style </a>
</br>
<a class="fa-star-o stdColor"  href="www.google.com"> Not inline style </a>

Answer 4

你不能写论点＆＃34;颜色＆＃34;在HTML中。一旦你删除＆＃34;颜色：黄色;＆＃34;从HTML，一切正常。只使用css文件来表示你不会遇到问题的样式。

CSS：

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

HTML：

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

Answer 5

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

这样可行。

字体很棒的颜色在悬停时不会改变

5 个答案: