jQuery与IE浏览器的挑战是（：悬停）？

2018-06-14 05:32:09

我正在为一个问题挣扎几天，无法找到答案。

我有一个在所有浏览器中都可以正常工作的鼠标移动功能，但在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 );
    });
});

我很高兴在任何帮助！干杯!

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

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

IE在CSS和它们的JavaScript事件对象中一直存在着动态伪类的臭名昭着的问题。你可以做的最好的事情就是跟踪鼠标移动，并且只有当鼠标进入目标元素的区域时才触发代码例程。换句话说，您应该使用与screenX和screenY事件属性结合的mouseover事件。

链接地址: http://www.djcxy.com/p/40509.html

上一篇: jQuery challenge in IE with is(:hover)?

下一篇: Border is outside the button in IE but not in FF, Chrome, Safari