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();
       });
  });

Jquery mouseover在悬停容器上显示超链接

1 个答案: