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>

Comments

#1
2022-08-27 WdxcWhits says :

thesis statement ideas <a href="https://thesismethyl.com/ ">compare and contrast thesis examples</a> thesis vs hypothesis

#2
2022-08-27 Jxcrtheossemn says :

philosophy of education essay <a href="https://essaymerrily.com/ ">argument essay topics</a> argument essay examples

#3
2022-09-27 Jynmntheossemn says :

glucophage hormones <a href="https://metforminynd.com/ ">metformin ingestion children</a> take extra metformin

#4
2022-09-28 WbzwWhits says :

why is furosemide banned in sports <a href="https://lasixona.com/ ">image of furosemide 20 mg</a> side effects of furosemide 20 mg

#5
2022-12-28 Morriswaine says :

<a href="http://hydroxychloroquinex.com/">http://hydroxychloroquinex.com/</a>

Comment form

Please type the word '' here:

BB code available :

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