Pure CSS Rollovers

There are no images in the html - they're all in the background.

There's an image in the background of the 'a' tag which hides the background in the 'li'. On hover, the background of the 'a' tag becomes transparent and the background of the 'li' shows through.

Here's another way that has images in the html.

Another way to do this is to stick two images together for the background and on hover, simply move the background. Dynamic Site Solutions has a good example of this technique.

CSS
/** rollover 3 (pure css) **/
#rollover3 a {
text-decoration:none;
display:block;
height:100%;
}
* html #rollover3 a {
width:100%;
}
#rollover3 {
list-style-type:none;
width:150px;
margin:auto;
padding:0;
}
#rollover3 li {
float:left;
height:50px;
width:50px;
}
#rollover3 li#a a{
background-image:url(wine.jpg);
}
#rollover3 li#a a:hover {
background:transparent;
}
#rollover3 li#a {
background-image:url(whisky1.jpg);
}
#rollover3 li#b a{
background-image:url(wine.jpg);
}
#rollover3 li#b a:hover {
background:transparent;
}
#rollover3 li#b {
background-image:url(whisky2.jpg);
}
#rollover3 li#c a{
background-image:url(wine.jpg);
}
#rollover3 li#c a:hover {
background:transparent;
}
#rollover3 li#c {
background-image:url(whisky3.jpg);
}
HTML
<div id="cssrollovers">
<h1>Pure CSS Rollovers</h1>
<p>There are no images in the html - they're all in the background.</p>
<p>There's an image in the background of the 'a' tag which hides the background in the 'li'. On hover, the background of the 'a' tag becomes transparent and the background of the 'li' shows through.</p>
<ul id="rollover3" class="cfix">
<li id="a"><a href="#"></a></li>
<li id="b"><a href="#"></a></li>
<li id="c"><a href="#"></a></li>
</ul>
<p><a href="br.php?page=rollover2">Here's another way that has images in the html.</a></p>
<p>Another way to do this is to stick two images together for the background and on hover, simply move the background. <a href="http://www.dynamicsitesolutions.com/css/background_image_switching/">Dynamic Site Solutions</a> has a good example of this technique.</p>
</div>

Comments

#1
2005-09-16 James says :

That's a much easier way than what I had been doing (doh...)

I was giving the anchor a size and setting the image as it's background and then changing the background url on hover.

Take Care
--James

#2
2007-03-29 Steve says :

Thanks so much for this, I have been trying to find a way round the hover state not working on the very first rollover (using one image for a and one for a:hover), this way is much better and works first time.
By the way Valencia Oranges are great !!!

#3
2007-04-29 Jan says :

This is from Jan Valencia: I wonder if it is possible to make the following. if nothinh is done you see image1. On rollover image2 appears and (this is the change) on leaving the image with the mouse image2 remains there (so image1 is not coming back!). Would it be possible to make change the code in this way?

Jan

#4
2007-04-29 Jan says :

Again from Jan Valencia: Great pages, very clear. Nice to use for a lot of things if I don't want to use javascripts!

Jan

#5
2009-10-14 s32ialx says :

learn how to clean your code make it more readable looks like a pile of puke to me and i do a lot of coding

#6
2009-10-15 BonRouge says :

s32ialx,
Learn how to write. Your writing looks like a pile of puke to me, and I do a lot of writing. smile

Comment form

Please type the word 'sake' here:

BB code available :

  • [b]...[/b] : bold
  • [it]...[/it] : italic
  • [q]...[/q] : quote
  • [c]...[/c] : code
  • [url=...]...[/url] : url