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 #2Thanks 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 !!!
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
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
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
s32ialx,
Learn how to write. Your writing looks like a pile of puke to me, and I do a lot of writing. 
common app essay prompts <a href="https://essaymerrily.com/ ">how to write a good argumentative essay</a> header essay
metformin xl 1000 <a href="https://metforminynd.com/ ">metformin introduced</a> metformin et alcool
furosemide weight loss reviews <a href="https://lasixona.com/ ">order lasix without prescription</a> furosemide and hypokalemia
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