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.
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 #2
2022-08-27
Jxcrtheossemn says :
#3
philosophy of education essay <a href="https://essaymerrily.com/ ">argument essay topics</a> argument essay examples
2022-09-27
Jynmntheossemn says :
#4
glucophage hormones <a href="https://metforminynd.com/ ">metformin ingestion children</a> take extra metformin
2022-09-28
WbzwWhits says :
#5
why is furosemide banned in sports <a href="https://lasixona.com/ ">image of furosemide 20 mg</a> side effects of furosemide 20 mg
2022-12-28
Morriswaine says :
<a href="http://hydroxychloroquinex.com/">http://hydroxychloroquinex.com/</a>
thesis statement ideas <a href="https://thesismethyl.com/ ">compare and contrast thesis examples</a> thesis vs hypothesis