CSS/JQuery Hover Affect Only Hovered Element and Not Parent

Question

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

Coffee

    Fruits 

        

Answer 1

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

Answer 2

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

Answer 3

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.

Answer 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');
    }
);

Answer 5

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