将鼠标悬停在列表中

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