Mouseover images with CSS
This is a method to create mouseover effects in CSS for background images with html text on top. I have yet to see a solution like this that does not create a flicker in IE6, because the browser will not cache background images.
This solution is almost fully taken from a Sitepoint thread.
I changed the cursor to also indicate a link when the mouse hovers the text.
Give me feedback on this page/code
Example:
CSS:
<style type="text/css">
<!--
.cssnav {
position:relative;
font-family: arial, verdana, helvetica, sans-serif;
background-image: url(roll/over.gif);
background-repeat: no-repeat;
display: block;
width: 125px;
height: 25px;
margin: 0;
margin-bottom:0px;
padding: 0;
}
.cssnav a {
display:block;
font-size: 11px;
width: 125px;
height: 25px;
float: left;
margin: 0;
padding: 0;
color: black; text-decoration: none;
}
.cssnav img {width: 100%; height: 100%; border: 0; }
* html a:hover {visibility:visible}
.cssnav a:hover img{visibility:hidden}
.cssnav span {
position:absolute;
left:5px;
top:3px;
margin:0;
cursor: pointer;
}
-->
</style>
HTML:
<div class="cssnav"><a href="#"><img src="roll/normal.gif"><span>Home</span></a></div>
<div class="cssnav"><a href="#"><img src="roll/normal.gif"><span>Products</span></a></div>
<div class="cssnav"><a href="#"><img src="roll/normal.gif"><span>News</span></a></div>
<div class="cssnav"><a href="#"><img src="roll/normal.gif"><span>Location</span></a></div>