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);
    }
}

Darling

Consider storing the result of $("#widgets") as a variable instead of querying for it 4 times (this results in more DOM operations). – Trying

:hover is simply not a valid jQuery selector. – Morie

I think you need the .hover() event (a.k.a. .on('hover', ...)) instead. – Akeyla

Your title implies that this is only an IE8 issue, but with the invalid selector, it couldn't work anywhere. – Morie

@Sparky672 It should work in all browsers that implement queryselectorall and the :hover css selector, which is all modern browsers, not IE<9 – Luz

@KevinB, thanks, that would explain it. – Morie

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'))

Classic

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.

Luz

or applies a class to the widget that signifies it is in a hover state – Denture

or initially set a null value on a variable, then give it a value within mouseeleave(), then reference it again in a conditional statement. easy way to get around this IE8 issue. – Hypnosis

IE8 Supports document.querySelectorAll msdn.microsoft.com/en-us/library/ff462057.aspx#selectorapi in standards mode – Alanaalanah