jquery mousenter顯示超鏈接徘徊的容器

Question

我有這個jquery片段，它在鼠標懸停上顯示隱藏超鏈接，我的問題是一個嵌套列表，如果我將鼠標懸停在一個孩子父母將被顯示。如何顯示實際的超鏈接徘徊conatiner

$("div.dd3-content, div.dd-action-handle") 
      .mouseenter(function() { 
       $(this).parent().find('div.dd-action-handle a').show(); 
      }) 
      .mouseleave(function() { 
       $(this).parent().find('div.dd-action-handle a').hide(); 
      }); 

HTML

<ol class="dd-list"> 
    <li class="dd-item dd3-item" data-id="22"> 
     <button type="button" data-action="collapse">Collapse</button> 
     <button type="button" data-action="expand" style="display: none;">Expand</button> 
     <div class="dd-handle dd3-handle"></div> 
     <div class="dd3-content"><href="#" class="editable editable-click" data-url="/post" data-pk="22">some</href="#"></div> 
     <div class="dd-action-handle"> 
      <a href="/admin/dashboard/get_menu_item/22" data-toggle="modal" data-target="#editModal" class="edit_menu" style="display: none;"><i class="fa fa-pencil fa-2x"></i></a> 
      <a style="margin-left: 10px; display: none;" href="#" class="remove_menu"><i class="fa fa-times-circle fa-2x"></i></a> 
     </div> 
     <ol class="dd-list"> 
      <li class="dd-item dd3-item" data-id="23"> <div class="dd-handle dd3-handle"></div><div class="dd3-content"><href="#" class="editable editable-click" data-url="/post" data-pk="23">Tutorials</href="#"></div><div class="dd-action-handle"> 
        <a href="/admin/dashboard/get_menu_item/23" data-toggle="modal" data-target="#editModal" class="edit_menu" style="display: none;"><i class="fa fa-pencil fa-2x"></i></a> 
        <a style="margin-left: 10px; display: none;" href="#" class="remove_menu"><i class="fa fa-times-circle fa-2x"></i></a> 
       </div> 
      </li> 
     </ol> 
    </li> 
</ol> 

http://jsfiddle.net/lgtsfiddler/dSaVU/

Answer 1

好吧，我明白了，你的問題來自於事件傳播：當它的子節點上發射，它也在父元素上起泡。解決的辦法是阻斷傳播，一旦觸發一次：

$("div.dd3-content, div.dd-action-handle") 
      .mouseenter(function(ev) { 
       $(this).parent().find('div.dd-action-handle a').show(); 
       ev.stopPropagation(); 
      }) 
      .mouseleave(function(ev) { 
       $(this).parent().find('div.dd-action-handle a').hide(); 
       ev.stopPropagation(); 
      }); 

編輯： 既然你發佈你的jsfiddle，我檢查。下面解決「當徘徊父，子孩子的顯示」，這似乎是你的問題的問題（它只是查找直接的childNodes）

$(document).ready(function() { 
$("div.dd3-content, div.dd-action-handle") 
     .mouseenter(function() {   
      $(this).parent().children('div.dd-action-handle').children('a').show(); 
     }) 
     .mouseleave(function() { 
      $(this).parent().children('div.dd-action-handle').children('a').hide(); 
     }); 
    });