IE8 and checking to see if an element is being hovered

Hey there, last night I needed to figure out why a jquery selector wasn't working in IE8. :hover. Turns out IE8 doesn't support the hover css selector. Lame. Unfortunately I still have to support IE8, its a good portion of the users of my site. So, I came up with a quick workaround. It effectively just tracks whether the mouse is in the element or not. Now, this could be modified to be supported on multiple elements, but I only needed one so I hacked it together real quick. And it should get you started down the path on figuring out how to do it.

What it does, is if the element is clicked we wanted it to be visible, if the mouse was over it, we wanted it visible. If they move the mouse out, we wanted it to hide it. So on the click and mouse enter we show the menu. On the mouse leave event we want to hide it. The fix was to wait a quarter of a second on the mouse out, then check to see if the mouse was over an element that we considered part of the menu, if it wasn't over it, then hide it, else ignore the mouse out event timeout. Works like a charm.

In the code below, ns is used to namespace our code and keep things clean and orderly.

var ns = ns || {};
ns.menu = ns.menu || {};
ns.menu.profile = ns.menu.profile || {};
ns.menu.profile.visible = false;

$(function () {
    var profileMenuHeader = $("div.profileMenuHeader");
    var profileMenu = $("div.profileMenu");
    profileMenuHeader.click(function (e) {
        ns.menu.profile.visible = true;
        profileMenu.show();
        e.stopPropagation();
    });

    profileMenuHeader.mouseenter(function () {
        ns.menu.profile.visible = true;
        profileMenu.show();
    });

    profileMenuHeader.mouseleave(function () {
        ns.menu.profile.visible = false;
        setTimeout(function() {
            if (ns.menu.profile.visible == true) {
                return;
            }
            profileMenu.hide();
        }, 250);
    });

    profileMenu.mouseenter(function () {
        ns.menu.profile.visible = true;
        $(this).show();
    });

    profileMenu.mouseleave(function () {
        ns.menu.profile.visible = false;
        $(this).hide();
    });
});