javascript - 是(:hover) alternative for ie & firefox

Question

我有一个菜单，它在滚动时显示一个不是菜单子(monad)项的 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(":hover")。

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

Answer 1

以下代码为您提供了 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();
    });
});