Question

我有一个嵌套项目列表，每个项目都有自己的编辑链接。

<ul>
<li>Coffee</li>
<li>
    Fruits <a href="#" class="editLink">Edit</a>
    <ul>
        <li>Banana <a href="#" class="editLink">Edit</a></li>
        <li>Orange <a href="#" class="editLink">Edit</a></li>
        <li>
            Apple <a href="#" class="editLink">Edit</a>
            <ul>
                <li>Fuji <a href="#" class="editLink">Edit</a></li>
                <li>Red Delicious <a href="#" class="editLink">Edit</a></li>
                <li>Golden <a href="#" class="editLink">Edit</a></li>
            </ul>
        </li>
    </ul>
</li>
<li>
    Drinks <a href="#" class="editLink">Edit</a>
    <ul>
        <li>Coke <a href="#" class="editLink">Edit</a></li>
        <li>Pepsi <a href="#" class="editLink">Edit</a></li>
    </ul>
</li>
<li>Something <a href="#" class="editLink">Edit</a></li>
</ul>

我只想在将鼠标悬停在列表元素上时显示编辑链接。目前，当我将鼠标悬停在子元素上时，父元素也会受到影响。

$('li').hover(
    function(){
        $(this).find('.editLink').show();
    },
    function(){
        $(this).find('.editLink').hide();   
    }
);

我有以下CSS来使编辑链接最初隐藏

.editLink{
    display:none;
}

如何制作它以便只有悬停元素显示编辑链接而不显示其他链接？看起来像hide部分很好，但show部分影响所有嵌套的父级。以下是实际操作的示例：http://jsfiddle.net/D7yWm/

Answer 1

试一试。它使用直接子选择器（http://jsfiddle.net/D7yWm/4/）：

$(document).ready(function(){
    $('li').hover(
        function(ev){
            var li = $(this);
            li.parents('li').find('>.editLink').hide();
            if ( ! li.find('li > .editLink:visible').length ) {
                li.find('>.editLink').show();
            }
        },
        function(){
            var li = $(this);
            li.find('>.editLink').hide();
            li.parents('li:first').find('>.editLink').show();
        }
    );
});

如果您希望将其本地化为文本，则必须将文本包装在<span>或其他内容中，然后使用该文本。

ul {
    list-style-position: inside;
}

如果这对您不起作用，您可能需要考虑添加子弹的不同方式。或者用它作为计算休息时间的起点......

Answer 2

您需要在处理程序中停止传播事件

$(document).ready(function(){
  $('li').hover(
      function(e){
         e.stopPropagation();
           $(this).find('.editLink').show();
      },
      function(){
           $(this).find('.editLink').hide();   
      }
   );
});

Answer 3

如果你希望父母的.editlink在你从孩子移到他们的孩子后隐藏，那么你可以使用它：

$('li').hover(
    function(e){
        e.stopPropagation();
        $(this).parents('li').trigger('mouseleave');
        $(this).children('.editLink').show();
    },
    function(e){
        e.stopPropagation();
        $(this).parents('li').trigger('mouseleave');
        $(this).children('.editLink').hide();
    }
);

DEMO

Answer 4

这与您的问题不完全相同，但它可能会帮助其他人。我们的想法是突出顶部徘徊的孩子而不影响下面的父母：http://jsfiddle.net/skibulk/mcq6Lvw3/6/

$("div").hover(
    function (e) {
        e.stopPropagation();
        $(this).addClass('active').parents().removeClass('active');
    },
    function (e) {
        $(this).removeClass('active').parent().addClass('active');
    }
);

Answer 5

由于<li>嵌套在彼此之内，当你将鼠标悬停在一个孩子身上时，父母仍然会“徘徊”。要阻止显示所有父链接，您可以循环遍历所有父<li>并隐藏父项的链接。另外，使用.children()仅选择直接子项，而不是嵌套子项。

$(document).ready(function(){
    $('li').hover(
        function(){
            $(this).parents('li').each(function(){$(this).children('.editLink').hide();});
            $(this).children('.editLink').show();
        },
        function(){
            $(this).find('.editLink').hide();   
        }
    );
});

这是一个有效的jsfiddle。

CSS / JQuery Hover仅影响悬停元素而非父节点

5 个答案:

DEMO