:hover

This issue was fixed in Internet Explorer 7 beta 2.

Almost everybody loves a hover effect. You know, where you hold your mouse over something, and a picture changes, or the font changes, or the background changes, or borders appear. Yeah, just like links in this article. And yes, I know that IE can also do that. After all, Microsoft originally invented it for IE 4, and it was welcomed with open arms into the CSS standard. But for reasons best known to themselves, they decided not to allow it to detect hover over anything else.

Why would we want to do that? Because if we can detect hover over anything else, we can make all sorts of interesting effects. There are several uses for this. Highlighting current mouse position, making rich tooltips or just applying a brightening effect for some interaction. The most advanced one that most people try is the Pure CSS Menu. Unlike JavaScript menus which usually require tens of kilobytes of script code, and fail miserably when JavaScript is disabled, the Pure CSS Menu is still accessible even if both CSS and JavaScript cannot be used, and can be configured using just a few lines of CSS code. (:active could also be used for a similar purpose, but IE only supports that on links, just like :hover.)

Exactly why they decided not to implement this simple CSS is beyond me. It would be almost nothing more than they already support. Just add the CSS hover detect to the other elements as well as the links. Maybe they feel that their engine is not up to that.

Demo: The list of links has been collapsed into a single bar at the top of the page. If you hold your mouse over it, it should appear as a dropdown menu.

Workaround: Use DHTML behaviours in an attempt to mimic the :hover behaviour. Good luck.

Don't click this link unless you want to be banned from our site.