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

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