jQuery .is(":hover") In IE8

Question

I am having an issue checking the state of a div in IE8. I want to check if the mouse is currently hovering over some divs or not. Currently in IE8, I get the following error: Syntax error, unrecognized expression: hover. Below is the jQuery that is causing the error:

// This function will close the slideout of widgets
function CloseWidgetPanel()
{
    if (!$("#widgets").is(":hover") && !$(".widgetPanel").is(":hover"))
    {
        if ($("#widgets").is(":animated"))
        {
            $("#widgets").stop(true, true);
        }
        $("#widgets").hide("slide", { direction: "right" }, 300);
    }
    else
    {
        // We are currently hovering over a panel, so check back in 2 seconds.
        setTimeout(CloseWidgetPanel, 2000);
    }
}

Answer 1

Alternative way:

$(".widgetPanel, #widgets").hover(function() {
    $(this).toggleClass('hover')
});

Then:

if (!$("#widgets").is(":hover") && !$(".widgetPanel").is(":hover"))

change to

if (!$("#widgets").hasClass('hover') && !$(".widgetPanel").hasClass('hover'))

Answer 2

jQuery does not implement the :hover selector and IE8 doesn't support queryselectorall, therefore it fails. You'll have to find another way to detect that the element is currently being hovered over such as a mouseenter and leave event that sets a global (or parent scope) variable or applies a state class/attribute to the element.