JQuery .is(':hover') not working correctly in IE9

Question

I am having a problem with a popup div in IE9 with the following code:

<li id="info001" class="listInfo" onmouseover="ShowPreview(this);" onmouseout="HidePreview();">

and my HidePreview checks to make sure the mouse isn't over the listItem or the preview itself, like this:

function HidePreview() {
    if (!($('#thePreview').is(':hover') || $('#info001').is(':hover'))) {
        $('#thePreview').hide();
    }
}

This works fine in Chrome and Firefox, but in IE9 the preview starts flickering as I move over both the listItem and the preview, and then as I move over the preview alone, it gets hidden.

Is there any way to avoid this?

EDIT: For clarity, the thePreview div overlaps the info001 li enough to easily move the mouse between them.

EDIT: http://jsfiddle.net/ControlFreak/QQsGS/

Answer 1

Try doing something like this instead:

var $thePreview = $("#thePreview");

$(".listInfo").hover(
    function () {
        $thePreview.show();
    },
    function () {
        $thePreview.hide();
    }
);

Working example on jsFiddle.

You can still use that code, you just need to change the pseudo-event from hover to mouseenter mouseleave (if you're running 1.9+). See this for more info: jquery.com/upgrade-guide/1.9/#hover-pseudo-event