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.
</pre> <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> <pre>
#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;
}
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:
You can see that the site’s layout is somewhat broken at this point. Usually this is something that gets caught prior to a site going live, but I’m also using this site as an experiment in exposing the process of design. Underestimating the necessary heights of backgrounds is something that comes up often enough. In my case, I’d like to try and find a solution that doesn’t require an even larger background image.