將鼠標懸停在列表中

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