CODEWITHSUNDEEP
cssfont-awesome
chuckd
chuckd

Reputation: 14530

Font awesome color won't change on hover

I have this bit of css that works for changing the cursor when hovering, but not for changing the color. Why does the cursor change, but not the color?

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

Here is some html. It looks kinda like this

<div [email protected](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>

Upvotes: 2

Views: 1467

Answers (5)

sOOsOOry
sOOsOOry

Reputation: 231

Move the link of this CSS file(in which the above CSS is written) to the bottom of other CSS links.

This will work.

Upvotes: 0

Krista
Krista

Reputation: 3

You cannot write argument "color" in html. As soon as you remove "color: yellow;" from html, everything works fine. Use only css file for the styles like this you won't have problems.

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>

Upvotes: 0

Astaroth
Astaroth

Reputation: 783

It's because of the inline styles as everyone says. Inline takes precedence over classes or ids (unless that you add the !important). :hover is a pseudoclass so it takes precedence over :hover as well.

Here's a little example so you can see it

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

Upvotes: 0

Mike Covington
Mike Covington

Reputation: 2157

The problem is that you are setting the color of the icon with inline styles. These will not be changed by styles in a stylesheet, unless you use !important. It works for me if I use this:

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

See this fiddle.

That being said, it is better to move all of your inline styling to a stylesheet and avoid using !important.

Edit: By the way, the reason you want to avoid !important when possible is that it can make debugging difficult because CSS is no longer cascading as expected and if you or anyone else wants to override the hover color in the future, you/they will have to use !important again and it becomes a vicious cycle.

Upvotes: 4

Ferran Buireu
Ferran Buireu

Reputation: 29320

I need the rest of HTML to check it out. However, I have coded a piece of HTML on my own adding your CSS and it worked. Look:

CSS:

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

HTML: 

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

And finally the jsfiddle: http://jsfiddle.net/b22LneLz/5/

Upvotes: 0

Related Questions