使用 is(:hover) 在 IE 中的 jQuery 挑战？

Posted 2023-05-08

【中文标题】使用 is(:hover) 在 IE 中的 jQuery 挑战？

【英文标题】：jQuery challenge in IE with is(:hover)?

【发布时间】：2012-04-27 15:27:00

【问题描述】：

我几天来一直在为一个问题苦苦挣扎，但找不到答案。

我的鼠标悬停在所有浏览器中都可以正常工作，但在 IE7、IE8 和 IE9 中却不行（惊喜）。

其目的是当鼠标悬停在菜单点上时 div 会出现，并在离开菜单或 div 时消失。我猜我已经将问题隔离到以下行： if ($('#top-navigation').is(':hover') || $('#header').is(':hover') || $('#menu a'). is(':hover')) 由于 IE 中的行为，我很确定这就是麻烦所在。

$(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 );
    );
);

我很高兴得到任何帮助！干杯！

【参考方案1】：

好的，我想出了一个解决方案：

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

【参考方案2】：

IE 在 CSS 中的动态伪类及其对应的 javascript 事件中一直存在臭名昭著的问题。您可以做的最好的事情是跟踪鼠标移动并仅在鼠标进入目标元素区域时触发您的代码例程。换句话说，您应该将 mouseover 事件与 screenX 和 screenY 事件属性结合使用。