将鼠标悬停到列表与否

Question

我尝试将鼠标悬停在.logo上，然后.nav_b为slideDown / slideUp，如果鼠标继续移至.nav_b，则仍会显示。

这些代码工作正常，但当鼠标从.logo移动到.nav_b时，它将触发语句.logo mouseout。
 如何设置标志或..以便从moveout到.logo调用鼠标.nav_b？有什么建议吗？谢谢！

http://jsfiddle.net/6URAb/

$('.logo').hover(function(){
    $('.nav_b').stop(true, true).slideDown({duration: 200, queue: false});
},function(){
    $('.nav_b').stop(true, true).slideUp({duration: 200, queue: false});
});

$('.nav_b').hover(function(){
    $('.nav_b').stop(true, true).show();
},function(){
    $('.nav_b').stop(true, true).slideUp({duration: 200, queue: false});
});

Answer 1

最简单的方法是更改您的标记并将悬停事件附加到.head元素 的的Javascript

$(function () {

    $('.head').hover(function () {
        $('.nav_b').stop(true, true).slideDown({
            duration: 200,
            queue: false
        });
    }, function () {
        $('.nav_b').stop(true, true).slideUp({
            duration: 200,
            queue: false
        });
    });
});

<强> HTML

<div class="head">
    <div class="logo">logo</div>
    <div class="nav_b">
        <div class="search">search</div>
    </div>
</div>

<强> Check Fiddle

修改

如果您希望实现相同的marup，那么您需要使用 setTimeout 和 cleartimeout 的组合。像这样的东西

$(function () {
    var TIME_OUT;
    $('.logo').hover(function () {
        if (TIME_OUT) clearTimeout(TIME_OUT);
        $('.nav_b').stop(true, true).slideDown({
            duration: 200,
            queue: false
        });
    }, function () {
        $('.nav_b').stop(true, true).slideUp({
            duration: 200,
            queue: false
        });
    });

    $('.nav_b').hover(function () {
        $('.nav_b').stop(true, true).show();
    }, function () {
        TIME_OUT = setTimeout(function () {
            $('.nav_b').stop(true, true).slideUp({
                duration: 200,
                queue: false
            });
        }, 250);
    });
});

<强> Updated Fiddle