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

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