advanced code snippet search

Posted By

michellebracken on 08/18/11


Tagged


Versions (?)

Who likes this?

1 person have marked this snippet as a favorite

spee66


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.

Expand | Embed | Plain Text 
  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.