Roll Overs with CSS - No Javascript Required
DiggBlinkRedditDeliciousTechnorati
article by Srirangan
Roll overs with pre loading images with javascript and changing attribute value on onmouseover events .. Yuck! Roll overs can be simple and fun, using just a bit of smart CSS code.
Example 1: Modifying Background Colors
<style>
a.special {
background-color:#ffffff;
}
a.special:hover {
background-color:#ffff00;
}
</style>
<a href="..." class="special">...</a>
Example 2: Modifying Text Properties
<style>
a.special {
font-family:verdana;
font-size:12pt;
color:#000000;
text-decoration:none;
}
a.special:hover {
font-family:verdana;
font-size:11pt;
color:#0000aa;
text-decoration:underline;
}
</style>
<a href="..." class="special">...</a>
Example 3: Modifying Transparency
<style>
a.special {
filter:alpha(opacity=25);-
moz-opacity:.25;
opacity:.25;
}
a.special:hover {
filter:alpha(opacity=75);-
moz-opacity:.75;
opacity:.75;
}
</style>
<a href="..." class="special">...</a>