Javascript “onMouseOver” triggering for children?

Question

I can't tell if this is a result of the jQuery I'm using, but this is what I'm trying to do:

<div class="info" style="display: inline;" 
  onMouseOut="$(this).children('div').hide('normal');" 
  onMouseOver="$(this).children('div').show('normal');"
>
  <img src="images/target.png">
  <div class="tooltiptwo" id="tooltip" 
    style="font-weight: normal; font-size: 0.8em;" >TOOLTIP TEXT</div>
</div>

To anyone familiar with basic CSS and jQuery, I'm trying to add a simple animation to my tooltips. The problem is the triggering of such an animation. It seems that when the animation happens, if the user moves their mouse over the tooltip, the animation will go into a loop of showing and hiding until the user moves the mouse away. This is an undesired effect, as I want the animation to go away just once, when the mouse moves out of the parent div. I've positioned my CSS so that the tooltip appears away from the parent div, but regardless the actions should be triggering only on the parent, and not any of its children.

So basically, how would I go about achieving this? I want my hover/out state on my parent element to trigger a function (an animation) on the children of that parent, without the hover/out states of the children doing anything. It seems that the normal method of onMouseOver and onMouseOut is triggering even for the children of the parent that the method belongs to, which is causing some rather undesirable effects.

Note that I'm new to jQuery (although its amazing so far, I want to coat my site in its goodness if I can) and if there is a better way to achieve the hover/out states using jQuery I probably don't know about them. ^_^

Thanks

Answer 1

edit: actually this is a much better solution (credit):

$('.info').bind('mouseenter', function() {
    $('div', this).show('normal');
});

$('.info').bind('mouseleave', function() {
    $('div', this).hide('normal');
});

// hide the tooltip to start off
$('.info div').hide();

edit2: in response to the comments, i think i would suggest structuring your HTML differently then, or binding the event to the sibling element (the image) instead:

<div class="info">
    <img src="stuff.jpg" />
</div>
<div class="tooltip"></div>

or binding on the image:

$('.info img').bind('mouseenter', function() { etc... });
$('.info img').bind('mouseleave', function() { etc... });

Answer 2

This is an excellent article about mouse events: http://www.quirksmode.org/js/events_mouse.html

Answer 3

Did you follow this tutorial ?

Especially the mousemove part, where he constantly sets the positioning values left and top to align the tooltip next to the cursor. the X and Y coordinates are called via .pageX and .pageY. And he also adds a little offset of 15 px so the tooltip is not directly below the cursor.

That way, the mouse can not be over the tooltip, even the fadeout phase. Hence no infinite loop

Answer 4

Bind it to the parent div, and use stopPropagation to stop it from being binded to your tooltip. Like this:

[code] $('.info').bind('mouseover', function(e) { e.stopPropagation(); $(this > 'div').show('normal'); });

$('.info').bind('mouseout', function() { $(this > 'div').hide('normal'); });

// hide the tooltip to start off $('.info div').hide(); [/code]

However, I too use pageX and pageY to make my tooltips move with the cursor.