The CSS :hover pseudoclass is nice and allows you to easily modify behaviour on web page elements when user moves her mouse, and pretty much every web programmer has written something like this in her stylesheet:
a {text-decoration:none;}
a:hover {text-decoration:underline;}
And all these programmers have found that CSS hovering doesn’t work well in Internet Explorer when it isn’t done on a straightforward link. For example this will not have the desired effect:
a:hover div {border-color:red;}
div:hover {font-weight:bold;}
With some light scripting however you can make you page work this way. Basically, make sure that an elements receives the class name .hover when the mouse moves over it; and that the class is removed when the mouse moves away. If you enable such behaviour you’ll see that this works on across different browsers:
a.hover div {border-color:red;}
div.hover {font-weight:bold;}
The code to set up this magic is simpe (example in Prototype)…
function makeHoverable(el) {
// Setup mouseover and mouseout events to add and remove the 'hover' class
Event.observe(el, 'mouseover', function(){el.addClassName('hover');});
Event.observe(el, 'mouseout', function(){el.removeClassName('hover');});
}
// When the document is ready
document.observe('dom:loaded', function() {
// ... we loop through all element with the class name 'hoverable'
$$('.hoverable').each(makeHoverable);
// ... and all links to make them act nicely
$$('a').each(makeHoverable);
});
Now finally add the class name hoverable to all the elements you want to use this new behaviour for:
<div class="hoverable">
I'll be bold when you move the mouse over me.
</div>
» See it in action
If you plan to use this method along with complex CSS positioning you should be aware that mouseover and mouseout sometimes behaves strangely when applied to two elements on top of each other. In this case, you could try to combine mouseenter and mouseleave for robust IE support with CSS pseudo-classes to support everything else. It might work.
