Updated: Hover for non-anchor elements in IE6

The ‘:hover’ pseudo-class works on all visual elements in IE 7+, FF, Safari, Chrome and Opera. But for obvious reasons IE 6 fails to recognize the ‘:hover’ pseudo-class for elements other than the anchor(<a></a>).

Here is the updated code, which is faster and is targeted only IE 6 by a combination of JavaScript conditional comments & feature detection.

All you’ve to do is to include this script in your html document and add the class ‘hoverable’ to all the non-anchor elements to which you want the hover action. And in your stylesheet add an extra selector for the element along with the ‘:hover’ style definition. Look at the code of the updated example to get a clear idea.

8 thoughts on “Updated: Hover for non-anchor elements in IE6”

Hi, I encourage you to test this jQuery plugin which definitively implement the :hover functionality on IE6. You don’t have to change anything on your code, just add and load the plugin.http://plugins.jquery.com/project/ie6hover

@poupougnac – I’d strongly recommend not to use that plugin, because it tries to parse the css files and apply fixes based on the selectors with hover defined. As IE 6 has very poor js performance and in any project with css files that have more than a few hundreds of lines this will result in a huge impact on the performance.

@livingston – Is there anyway to blanket this functionality to LI’s or all child elements of the element with the class? I ask because in the event you are using a CMS you may not actually be able to touch the markup generated.

@Aditya: I agree that event delegation would be much better approach, especially when there are hundreds of nodes and new nodes being added to the DOM after page load. But that would drastically affect the performance as we’d have to listen on body/window for ‘mouseenter/mouseleave’ events, which would be triggered for all the elements on the page.

@Dave Bergschneider – you can always modify the selector `$(‘.hoverable’)` with the elements that you intend to apply the hover fix.

For eg. if you want to apply the hover fix to be applied on li’s within a ul, the modify the selector as `$(‘ul li’)`.