1

I'm trying to set a hover effect over an image, so that it changes color when the mouse is over it. That's my html:

 <div class="col s4"> <ul id="social"> <li id="fb"></li> <li id="tw"></li> <li id="em"></li> <li id="fa"></li> </ul> </div>

And that's my CSS:

ul#social li#fb { height:32px; width:32px; background-image:url(../img/social/Facebook-icon-(1).png); } ul#social li#fb:hover{ background-image:url(../img/social/Facebook-icon.png); } [...]

The first background-image is in black and white , the second is in color . Unfortunately , however , my code does not work: it does not display the image in black and white. If imposed as background-image the color image I can see it properly, but the hover effect will not work anyway.

Where am I wrong?

Improve this question
3
  • you can try to make one image that has the two states in in, displaying the first normal en changing the background-position on :hover Commented May 25, 2015 at 19:38
  • 3
    i geuss that the () in your image name are the reason for this to happen Commented May 25, 2015 at 19:39
  • working jsfiddle.net/soledar10/b320darL Commented May 25, 2015 at 19:43

1 Answer 1

Reset to default
2

The problem is not in :hover, so it's probably in your image path.

I pasted your code in this fiddle, only changing background-image to background-color and you can see that it changes from red to green when your mouse is over it.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.