Updated: Hover for non-anchor elements in IE6

The updated version of the previous version of Hover for non-anchor elements in IE 6.

Before proceeding further, here’s a brief description of the problem,

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.

    (function ($) {
        $(document).ready(function () {
            $.single=function(a){return function(b){a[0]=b;return a}}($([1]));
            /*@cc_on
                if (!window.XMLHttpRequest) {
                    $('.hoverable').each(function () {
                        this.attachEvent('onmouseenter', function (evt) { $.single(evt.srcElement).addClass('hovered'); });
                        this.attachEvent('onmouseleave', function (evt) { $.single(evt.srcElement).removeClass('hovered'); });
                    });
                }
            @*/
        });
    }(jQuery));

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.

I’ve used James Padolsey’s single jQuery object snippet in the event handlers to prevent the creation of a new jQuery object every time the event handler is executed, hence saving a few execution cycles and memory.

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

  1. @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.

  2. Wouldn’t it be better if you used event-delegation instead of attaching handlers to each such node, to make it work for nodes added later…


    // jquery example... doing in vanilla JS wont be hard either..
    $(document).ready(function () {
    /*@cc_on
    @if (@_jscript_version == 5.6 || (@_jscript_version == 5.7 && !window.XMLHttpRequest))
    $(".hoverable").live("onmouseenter",function(){
    $(this).addClass("hovered");
    }).live("onmouseleave",function(){
    $(this).removeClass("hovered");
    });
    @end
    @*/
    });

    PS: not recommended if no newer nodes would be added later… delegation is a bit slower than individually attached events

  3. @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.

  4. @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’)`.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>