Posted By

michellebracken on 08/18/11


Versions (?)

Who likes this?

1 person have marked this snippet as a favorite


Swap Background Images on Hover

 / Published in: CSS

There are two very similar ways to achieve this. The key in both is to use the :hover pseudo-class to change either the url of the image or the position of an image sprite

Unfortunately IE only accepts :hover on a link and not another element. You can use something like the suckerfish system to dynamically add a class for IE and simulate the :hover behavior.

  1. 1 .element {background-image: url("path-to-an-image")}
  2. 2 .element:hover {background-image: url("path-to-a-different-image")}
  3. 3
  4. 4 .element {background-position: top-value left-value}
  5. 5 .element:hover {background-position: different-top-value different-left-value}

Report this snippet  

You need to login to post a comment.