I recently had a client ask me to create a mouseover menu that had 3 states. The default state would show one image set of images, then on mouseover the highlighted image would be replaced with a new image, and all the other images in the menu would fade out.
Initially I thought I was going to have to break out some jQuery to accomplish this, but after some careful research I decided to give it a try using only css3 and sprites. I was really surprised, and incredibly pleased when everything worked out better than I’d expected.
I initially created the sprite with the default state and mouseover state.
After that I began to construct the HTML and CSS needed.
[html]<div id="doorway"><a id="door_goldpan" href="/treasure-hunting/69-the-prospectors-challenge">Gold Panning Adventures</a>
<a id="door_metaldetect" href="/treasure-hunting/71-metal-detecting-adventure">Detecting Earth’s Treasures</a>
<a id="door_geocache" href="/treasure-hunting/70-take-the-geocaching-challenge">The Geocaching Challenge</a>
<a id="door_gemstone" href="/treasure-hunting/222-gemstone-mining-adventure">Gemstone Mining Adventure</a>
</div>
[/html] [css]#doorway:hover a {
opacity: 0.5;
}
#door_goldpan, #door_metaldetect, #door_geocache, #door_gemstone {
-webkit-transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-o-transition: opacity .25s ease-in-out;
transition: opacity .25s ease-in-out;
background-image: url("http://www.function505.com/wp-content/uploads/2012/03/mouseover-sprite-01.jpg");
background-repeat: no-repeat;
display: block;
float: left;
height: 226px;
margin: 0 20px 7px 0;
overflow: hidden;
text-indent: 100%;
white-space: nowrap;
width: 330px;
}
#door_goldpan:hover, #door_goldpan:focus, #door_metaldetect:hover, #door_metaldetect:focus,
#door_geocache:hover, #door_geocache:focus, #door_gemstone:hover, #door_gemstone:focus {
opacity: 1 !important;
}[/css]
So I combined 2 hover states to create the effect I wanted, something that all modern browsers support.
When you mouse over the parent div #doorway, all the anchor tags within are set to a 50% opacity. Mouseover the anchors themselves and their opacity is set to 100%. I added an css3 transistion on the opacity simply for esthetics.
The overflow, text-indent, and white-space properties are used to hide the anchor tag’s text in a more efficient manner, than the typical text-indent: -9999px;
Here’s an example: