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