jQuery mouseover mouseout问题

Question

I have some issue with a piece of code, i am using a sort of tooltip on links, but when a link has child elements in it, it blinks quick(when i hover over the child element(s)).

basic jQuery code(the part that shows the tip)(stripped down version, can not use a hover event!)

    $('.aaa').bind('mouseover mouseout',function(e) {
        if(e.type == 'mouseover'){
           $('.tip').show() 
        }else{
           $('.tip').hide() 
        } 
    });                 

this works

    <a href="#" class="aaa"></a>

this works not(good)

   <a href="#" class="aaa">
      <img src="images/icon.png"/>
      <span>text</span>
   </a>

Answer 1

Use mouseenter and mouseleave instead of mouseover mouseout.

Mouse over/out are triggered once for every child element. Enter/leave are what you want/expect. jQuery has normalized these across all browsers.

EDIT: here's a ref page: http://api.jquery.com/mouseenter/

Answer 2

You should use the hover() method

var $tip = $('.tip');

$('.aaa').hover(
    function() {
        $tip.show();
    },
    function() {
        $tip.hide();
    }
);