Question

I am trying to toggle two buttons’s opacity when the user hovers over the containing div, and when they mouse out it should go back to being hidden, at the moment it is doing that but as soon as I try to click on one of the buttons, it goes mad and starts toggling the opacity on and off repeatedly, here is my code,

Javascript/jQuery:

    $('#container').live({
      mouseover: function() {
          $('.button').fadeToggle();
      },
      mouseout: function() {
          $('.button').fadeToggle();
      }
    });

HTML:

            <div id="container">
                <div class="button"></div>
                <div></div>
                <div class="button"></div>
            </div>

Thanx in advance!

PS: Sorry about the title, I forgot to change it, as it is showing and hiding the buttons with a fade effect and not toggling the opacity.

Answer 1

The mouseover and mouseout events bubble, meaning that they will also fire for all of the element’s children.

You should handle mouseenter and mouseleave, which do not bubble.