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

CSS/JQuery Hover Affect Only Hovered Element and Not Parent(CSS/JQuery 悬停只影响悬停元素而不影响父元素)

问题描述

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

I have a list of nested items, each which has it's own edit link.

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

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

I only want the edit link to display when one hovers over list element. Currently when I hover on a child element, the parent is affected as well.

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

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

I have the following CSS to make the edit link hidden initially

.editLink{
    display:none;
}

如何使只有悬停的元素显示编辑链接而不显示其他元素?似乎隐藏部分很好，但显示部分会影响所有嵌套的父母.以下是实际示例:http://jsfiddle.net/D7yWm/

How do I make it so that only the hovered element has the edit link show and not the others? Seems like the hide part is fine but the show part affects all the nested parents. Here is the sample in action: http://jsfiddle.net/D7yWm/

推荐答案

试试这个.它使用直接子选择器(http://jsfiddle.net/D7yWm/4/):

Give this a try. It uses the direct child selector (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> 或其他东西中，然后改用它.

If you want it localized to just the text, you're going to have to wrap the text in a <span> or something and use that instead.

ul {
    list-style-position: inside;
}

如果这对您不起作用，您可能需要考虑另一种添加项目符号的方法.或者以此为起点来解决剩下的问题……

And if that doesn't work for you, you may have to look at a different way of adding the bullets. Or use this as a starting point for figuring the rest out...

这篇关于CSS/JQuery 悬停只影响悬停元素而不影响父元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！