CSS: Esempio di rollover con unica immagine, senza tremolio

Note

Immagine usata nell'esempio

Stile css utilizzato per l'effetto rollover .roll ul, li {
margin: 0;
padding: 0;
list-style: none;
}
a.roll {
background: url(bg_rollover.gif) no-repeat left;
display: block;
line-height: 22px;
height: 22px;
padding-left: 50px;
text-decoration: none;
width: 150px !important;
width /**/: 200px;
font-family: Verdana, Geneva;
font-size: 12px;
}
a.roll:link {
color: #731D1D;
background-position: 0px 50%;
}
a.roll:visited {
color: Purple;
}
a.roll:hover {
color: #FFFFFF;
background-position: -200px 50%;
}

Xhtml <ul class="roll">
<li><a class="roll" href="#">Ischia hotel</a></li>
<li><a class="roll" href="##">Capri hotel</a></li>
<li><a class="roll" href="###">Sorrento hotel</a></li>
<li><a class="roll" href="####">Positano hotel</a></li>
<li><a class="roll" href="#####">Amalfi hotel</a></li>
</ul>

Copyright

La tecnica usata in questa pagina di libero utilizzo

miniDesign