jQuery challenge in IE with is(:hover)?

Question

i'm struggling with a problem for days and couldn't find an answer.

I've a little mouseover thing which works fine in all browser, but not (suprise) in IE7, IE8 nor IE9.

The intention is that a div appears on mouseover on a menu point and disappears on leaving the menu or the div. I've isolated the problem to the following line i guess: if ($('#top-navigation').is(':hover') || $('#header').is(':hover') || $('#menu a').is(':hover')) { Because of the behavor in IE i am quite sure that's the line of trouble.

$(document).ready( function() {
    $mypage = $("body").attr("class");
    $("#"+$mypage).show();
    $("#menu a:contains('"+$mypage+"')").parent().addClass("current");

    $("#menu a").hover(function() {
        $(".transparent").hide();

        $("#menu li").removeClass("current");
        $(this).parent().addClass("current");

        $element = "#" + $(this).text();
        $($element).show();
    });

    function hide_popup(){
        if ($('#top-navigation').is(':hover') || $('#header').is(':hover') || $('#menu a').is(':hover')) {
            return false;
        }else{
            $("#menu li").removeClass("current");
            $(".transparent").hide();

            $mypage = $("body").attr("class");
            $("#"+$mypage).show();
            $("#menu a:contains('"+$mypage+"')").parent().addClass("current");
        }
    };
    $("body").mouseover(function() {
        window.setTimeout( hide_popup, 2000 );
    });
});

I am happy on any help! Cheers!

Answer 1

Ok, I figured out a solution:

function hide_popup(){
    $("#top").hover(function () {
        return false;
    },function () {
        $("#menu li").removeClass("current");
              $(".transparent").hide();

        $mypage = $("body").attr("class");
        $("#"+$mypage).show();
        $("#menu a:contains('"+$mypage+"')").parent().addClass("current");
    });
};

Answer 2

IE has always had notorious problems with dynamic pseudo-classes in CSS and their JavaScript event counterparts. The best thing you can do is to track the mouse movements and fire your code routine only when the mouse has entered the area of the target element. In other words, you should use the mouseover event combined with the screenX and screenY event properties.