Question

I have a nested html structure like this:

<ul class="root">
    <li>Foo 1 <label class="bar-class">bar</label>
         <ul>
            <li>Foo 2 <label class="bar-class">bar</label>

            </li>

            <li>Foo 3 <label class="bar-class">bar</label>

            </li>
        </ul>
    </li>
</ul>

And so on, it is a site map so the nesting can be as deep as you like.

I am trying to show and hide the bar label on hover of the li element.

With code like this:

 $('.root li').live({
                mouseenter:
                       function () {
                           $(this).find('>.bar-class').show('slow');
                       },
                mouseleave:
                       function () {
                           $(this).find('>.bar-class').hide('fast');
                       }
            });

The problem is, that every li parent of the current also shows its bar, how do I select it so that ONLY the current item’s bar gets selected?

I’ve tried variations but just not cracked it yet.

Thanks.

Edit 1: Fixed html tags.

Answer 1

You can return false from the callback function to stop further propagation of the event up the DOM tree.

And also change to using mouseover and mouseout:

$('.bar-class').hide();

$('.root li').live({
  mouseover:
    function () { $(this).find('>.bar-class').show('slow'); return false; },
  mouseout:
    function () { $(this).find('>.bar-class').hide('fast'); return false; }
});​

At this point I would like to encourage you to convert from using live to using on(), because live is deprecated.

In this case, the code becomes:

$('.root').on('mouseover mouseout', 'li', function () {
  $(this).children('.bar-class').stop(true, true).fadeToggle('slow');
  return false;
});​

Reference thanks to Yoshi: http://jsfiddle.net/6FzWU/2/