9

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);
    }
}
Improve this question
6
  • Consider storing the result of $("#widgets") as a variable instead of querying for it 4 times (this results in more DOM operations).
    – wsanville
    Commented Dec 5, 2012 at 17:41
  • 3
    :hover is simply not a valid jQuery selector.
    – Sparky
    Commented Dec 5, 2012 at 17:42
  • 1
    I think you need the .hover() event (a.k.a. .on('hover', ...)) instead.
    – Blazemonger
    Commented Dec 5, 2012 at 17:43
  • Your title implies that this is only an IE8 issue, but with the invalid selector, it couldn't work anywhere.
    – Sparky
    Commented Dec 5, 2012 at 17:46
  • 2
    @Sparky672 It should work in all browsers that implement queryselectorall and the :hover css selector, which is all modern browsers, not IE<9
    – Kevin B
    Commented Dec 5, 2012 at 17:46

2 Answers 2

Reset to default
10

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'))
Improve this answer
7

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.

Improve this answer
3
  • 2
    or applies a class to the widget that signifies it is in a hover state
    – g19fanatic
    Commented Dec 5, 2012 at 17:44
  • 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.
    – klewis
    Commented Jul 25, 2013 at 18:52
  • IE8 Supports document.querySelectorAll msdn.microsoft.com/en-us/library/ff462057.aspx#selectorapi in standards mode
    – sreekarun
    Commented Oct 9, 2013 at 11:59

Not the answer you're looking for? Browse other questions tagged or ask your own question.