CSS/JQuery 悬停只影响悬停元素而不影响父元素

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

如何使只有悬停的元素显示编辑链接而不显示其他元素？ 似乎隐藏部分很好，但显示部分会影响所有嵌套的父母。 以下是实际示例：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。