CSS/JQuery Hover Affect Only Hovered Element and N

问题:

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

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

.editLink{
    display:none;
}

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/

回答1:

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

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

回答2:

You need stop propagation of the event in the handler

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

回答3:

If you want parent's .editlink to hide after you move from them to their children then you can use this:

$('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

回答4:

This is not exactly the same as your problem but it may help somebody else. The idea is to highlight the top hovered child without affecting the parents below: 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');
    }
);

回答5:

Since the <li>'s are nested inside eachother, the parents are still being "hovered" when you hover over a child. To prevent all the parent links showing, you can loop through all the parent <li>'s and hide the links for the parents. Also, use .children() to only select a direct child, not nested 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();   
        }
    );
});

Here is a working jsfiddle.