Question

我有一个项目列表，如果项目列表项目悬停在上面，我想显示一个相关的面板。我已经有了它的工作，但问题是，当我使用mouseleave函数时，由于显而易见的原因，我一直悬停在链接列表项上时，我不能将鼠标悬停在面板内的内容上。

我已经在这几天了，并且无法弄清楚需要做什么来保持相关面板打开的逻辑，所以我可以将鼠标悬停在它上面并点击其中的阅读更多链接。

我尝试在面板上添加一个关于悬停状态的类，但这似乎也不起作用。

我的HTML是：

<div id="item-wrapper">
    <ul>
        <li><a href="#" id="item-1">Item 1</a>
        </li>
        <li><a href="#" id="item-2">Item 2</a>
        </li>
    </ul>
</div>

<div id="panel-1" class="panel">
     <h2>This is panel 1!</h2>
    <a href="#">read more 1...</a>
</div>

<div id="panel-2" class="panel">
     <h2>This is panel 2!</h2>
    <a href="#">read more 2...</a>
</div>

我的基本jQuery是：

$('#item-1').mouseenter(function () {
    $('#panel-1.panel').toggle();
});

$('#item-1').mouseleave(function () {
    $('#panel-1.panel').toggle();
});

$('#item-2').mouseenter(function () {
    $('#panel-2.panel').toggle();
});

$('#item-2').mouseleave(function () {
    $('#panel-2.panel').toggle();
});

...然后我有一些CSS，其中面板设置为display: none开始。请注意，如果两个列表项链接都没有悬停，那么如果之前已打开一个面板，则面板应该消失。

Fiddle demo here...

Answer 1

一些事情：

在li上使用悬停事件处理程序，而不是a。
这样您就可以将内容移至li，这样将鼠标悬停在内容上意味着您仍然将鼠标悬停在其父级li上。

<强>的jQuery ：

$('#item-1').parent().hover(function () {
    $('#panel-1.panel').toggle();
});

$('#item-2').parent().hover(function () {
    $('#panel-2.panel').toggle();
});

Forked jsFiddle

Answer 2

在我看来，唯一真正的方法是将隐藏的元素包装在你正在悬停的元素中，这样mouseleave事件就可以绑定到包装器。

链接更新： here's a fiddle

我还在元素上使用数据属性来跟踪要打开的面板。这样，您只需要以下代码：

$('#item-wrapper a').mouseenter(function (e) {
    if ($(this).data('panel')) {
        $('.panel').hide();
        $('#' + $(this).data('panel')).show();
    }
});
$('#item-wrapper').mouseleave(function () {
    $('.panel').hide();
});

编辑：添加条件以确保面板中的锚标签不会触发悬停事件。

jQuery显示/隐藏面板，然后将鼠标悬停在面板内的内容上

2 个答案: