Question

我有这个导航菜单，假设黑色有一个 testClass 类。

当您将鼠标悬停时，容器本身将显示（向下滑动）。

问题是，当我将鼠标悬停在菜单到时，容器本身与显示的导航类相同，容器向上滑动（隐藏内容）。

我想要发生的是，当我将鼠标悬停在黑色时，容器会显示出来，当我将鼠标悬停到与导航菜单具有相同类别的容器时，容器本身将会直到我鼠标离开某个类 testClass

之后才会显示

希望你们理解它。

这是JSFiddle。

这是我正在使用的代码，因为我被要求按SO

放置代码

<div class="body">
    <ul id="teaTypesMenu">
        <li name="black-tea-nav" class="testClass">
            Black
        </li>
    </ul>

    <div id="black-tea-nav" class="tempMenuContainer testClass">
        This is some awesome text that you never heard of. D:
    </div>
</div>

jQuery(document).ready(function($) {

$("#teaTypesMenu li").mouseenter(function() {

    //Get name attribute of li element
    var container_name = $(this).attr("name");
    //Show Element
    $("#" + container_name).slideDown(500);
});

$(".testClass").mouseleave(function(){
    //Hide Element
    $(".tempMenuContainer").slideUp();
});

});

Answer 1

当鼠标离开li时，您需要使用计时器稍微延迟，以便用户可以到达目标元素 - 这是因为您无法修改标记

<div class="body">
    <ul id="teaTypesMenu">
        <li name="black-tea-nav">
            Black
        </li>
    </ul>

    <div id="black-tea-nav" class="tempMenuContainer testClass">
        This is some awesome text that you never heard of. D:
    </div>
</div>

然后

jQuery(document).ready(function ($) {

    $("#teaTypesMenu li").hover(function () {
        var name = $(this).attr("name"),
            $target = $('#' + name);
        clearTimeout($target.data('hoverTimer'));
        $target.stop(true, true).slideDown(500);
    }, function () {
        var name = $(this).attr("name"),
            $target = $('#' + name);
        var timer = setTimeout(function () {
            $target.stop(true, true).slideUp();
        }, 200);
        $target.data('hoverTimer', timer);
    });

    $(".testClass").hover(function () {
        clearTimeout($(this).data('hoverTimer'));
    }, function () {
        $(this).stop(true, true).slideUp();
    });

});

演示：Fiddle

Answer 2

参见 DEMO

为您的类选择器添加:eq(1)以选择secend .testClass等

$(".testClass:eq(1)").mouseleave(function(){
//Hide Element
$(".tempMenuContainer").slideUp();

Answer 3

从中移除测试类，同样的脚本将起作用

<div class="body">
    <ul id="teaTypesMenu">
        <li name="black-tea-nav" class="">
            Black
        </li>
    </ul>
</div>

如果您不想删除该类，则可以将脚本更改为

$(".tempMenuContainer").mouseleave(function(){
    //Hide Element
    $(".tempMenuContainer").slideUp();
});

Answer 4

包裹它周围的东西，以便.mouseover（）不限于茶的名字。它看起来像这样：

HTML

<ul class="tea-list">
    <li>
        <div class="tea">Black</div>
        <div class="more-info">I love it!</div>
    </li>
</ul>

CSS

.tea-list{
    width:100%;
    list-style:none;
    display:block;
    padding:0;
    margin:0;
}

.tea-list li{
    cursor:help;
}

.tea {
    background:silver;
    padding:10px 15px;
    margin:0;
}

.more-info{
    display:none;

    background:black;
    color:white;
    padding:10px 15px;
    margin:0;
}

JS

$(document).ready(function(){
    $('li').mouseover(function(){
        $(this).children('.more-info').slideDown(500);
    }).mouseleave(function(){
        $(this).children('.more-info').slideUp(200);        
    })
})

jsfiddle.net/jLpHE/3 /

希望这会有所帮助 - 干杯！

鼠标离开jquery问题

4 个答案: