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

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