是ie&萤火虫

is(:hover) alternative for ie & firefox

本文关键字：萤火虫 amp ie      更新时间：2023-09-26

我有一个菜单，滚动时会显示一个不是菜单子级的div，当滚动时会再次隐藏该div。div直接放置在菜单项的下方，模仿子菜单。

html看起来像这样-

这是我的菜单-

<div id="nav">
<ul>
    <li class='with_panel'>
      <span id='panel1' class='current'><img src='theImage' /></span>
    </li>
    <!-- more list items -->
</ul>
</div>

在一个不相关的div中，我有这个-

<div id="panels">
     <div style="" id="panel1_panel" class="panel">
        <img src="myImage.png">
     </div>
<div>

我有一些jquery，当你滚动li-时，它会显示和隐藏相关的面板

$("#nav .with_panel").mouseenter(function(){
    var id = $(this).find("span").attr("id");
    $(".panel").removeClass("open");
    $panel = $("#" + id + "_panel");
    $panel.addClass("open");
    $img = $(this).find("span img");
    $img.addClass("on");
    var hide = function(){
    if(!$panel.is(":hover")){
            $img.removeClass("on");
            $panel.removeClass("open");
        }
    }
    $panel.mouseleave(hide);
    $(this).mouseleave(hide);   
})

这似乎只适用于Chrome，我相当确定这是由于ie&Firefox无法识别。is（"：悬停"）。

我无法更改html结构，只能更改javascript。所以我很难让它跨浏览器工作。有什么想法吗？

下面的代码给你200毫秒的超时时间（hide_to），让你在隐藏菜单之前离开菜单并进入面板。如果鼠标进入菜单项或面板，隐藏的超时将被取消，并在鼠标离开其中任何一个时重新启动。

$("#nav .with_panel").each(function() {
    var id = $(this).find("span").attr("id"),
        $panel = $("#" + id + "_panel"),
        $img = $(this).find("span img"),
        hide_to = null;
    var hide = function() {
            // start hide timeout
            hide_to = window.setTimeout(function () {
                $img.removeClass("on");
                $panel.removeClass("open");
            },200);
        };
    var show = function() {
            // clear hide timeout
            window.clearTimeout(hide_to);
            if (!$panel.is(".open"))
            {
                // open panel, only if it is not open already
                $(".panel").removeClass("open");
                $panel.addClass("open");
                $img.addClass("on");
            }
        };
    $(this).mouseenter(function() {
        show();
    }).mouseleave(function() {
        hide();
    });
    $panel.mouseenter(function() {
        show();
    }).mouseleave(function() {
        hide();
    });
});

试着用mouseover代替mouseenter，用mouseout代替mouseleave。

例如：

$("#nav .with_panel").mouseover(function(){
    var id = $(this).find("span").attr("id");
    $(".panel").removeClass("open");
    $panel = $("#" + id + "_panel");
    $panel.addClass("open");
    $img = $(this).find("span img");
    $img.addClass("on");
        var hide = function(){
    if(!$panel.is(":hover")){
            $img.removeClass("on");
            $panel.removeClass("open");
        }
    }
    $panel.mouseout(hide);
    $(this).mouseout(hide);   
})

从jQuery 1.9.1开始，所有浏览器的.is（"：hover"）似乎都已损坏。真倒霉以下是用jQuery 1.9.1在FF、IE10和Chrome（抱歉没有Opera）上测试的。Opera用户，请评论这是否适用于Opera。

function isHovered(elt){
    var temp = $(elt).parent().find(":hover");
    return temp.length == 1 && temp[0] == elt;
}

然后更换

$panel.is(":hover")

通过

isHovered($panel[0])

否则，保留所有代码。

小提琴：http://jsfiddle.net/mathheadinclouds/BxL4w/

相关文章：