Pure CSS Rollovers

On hover, the background-image changes.

The :hover images don't preload, so we can fix that by putting them in the links but styled so that they are invisible.

  • whisky1
  • whisky2
  • whisky3
CSS
/** rollover 2 (pure css) **/
#rollover2 a {
text-decoration:none;
display:block;
height:100%;
}
* html #rollover2 a {
width:100%;
}
#rollover2 {
list-style-type:none;
width:150px;
margin:auto;
padding:0;
}
#rollover2 li {
float:left;
height:50px;
width:50px;
}
#rollover2 li#a a{
background-image:url(wine.jpg);
}
#rollover2 li#a a:hover {
background-image:url(whisky1.jpg);
}
#rollover2 li#b a{
background-image:url(wine.jpg);
}
#rollover2 li#b a:hover {
background-image:url(whisky2.jpg);
}
#rollover2 li#c a{
background-image:url(wine.jpg);
}
#rollover2 li#c a:hover {
background-image:url(whisky3.jpg);
}
#rollover2 a img {
border:0;
width:0;
height:1px;
margin-top:-1px;
font-size:0;
overflow:hidden;
}

HTML
<div id="cssrollovers">
<h1>Pure CSS Rollovers</h1>
<p>On hover, the background-image changes.</p>
<p>The :hover images don't preload, so we can fix that by putting them in the links but styled so that they are invisible.</p>
<ul id="rollover2" class="cfix">
<li id="a"><a href="#"><img src="whisky1.jpg" alt="whisky1" /></a></li>
<li id="b"><a href="#"><img src="whisky2.jpg" alt="whisky2" /></a></li>
<li id="c"><a href="#"><img src="whisky3.jpg" alt="whisky3" /></a></li>
</ul>
</div>
Comment form

Please type the word 'wife' here:

BB code available :

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