與嵌套元素jQuery的懸停事件

Question

我目前得到了你的基本的，運行的設施，工廠菜單樹如下：

<ul id="nav"> 
    <li> 
    <a href="#">home</a> 
    <div class="controls">Some controls go here</div> 
    <ul> 
     <li> 
     <a href="#">item 1</a> 
     <div class="controls">Some controls go here</div> 
     </li> 
     <li> 
     <a href="#">item 2</a> 
     <div class="controls">Some controls go here</div> 
     </li> 
    </ul> 
    </li> 
</ul> 

的DIV與「控制」類是隱藏的開始。我想要發生的事情是，當你將鼠標懸停在某個li上時，相應li的控件顯示（當你移開鼠標時，它們會再次隱藏）。當鼠標懸停在某個嵌套li上時，會出現問題，它也是父母控件。這裏是我使用的jQuery：

$("#nav li").hover(
     function() { 
      $(".controls:first", this).css("display", "block"); 
     }, 
     function() { 
      $(".controls:first", this).css("display", "none"); 
     } 
    ); 

感謝您的幫助。 Remy

Answer 1

你實際上可以做到這一點，沒有js，雖然你需要js的ie6。

這樣的事情可能工作：

$(this).children('div').css("display", "block"); 

甚至：

$(this).children('div').show(); 

這裏 '這' 是李。

Answer 2

嘗試停止懸停函數中的事件傳播以防止事件冒泡到父項。如果您的「懸停」元素靠近在一起，您可能還想要查看hoverIntent插件來解決「閃爍」懸停效果的問題。

$("#nav li").hover(
    function(e) { 
      e.stopPropagation(); 
      $(".controls:first", this).css("display", "block"); 
     }, 
     function() { 
      $(".controls:first", this).css("display", "none"); 
     } 
);