jquery - Javascript "onMouseOver" triggering for children? - Stack Overflow

admin管理员组

文章数量:1393866

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.

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.

• javascript
• jquery
• parent-child
• jquery-events

Share Improve this question Follow edited Nov 7, 2021 at 9:06 Brian Tompsett - 汤莱恩 5,8937272 gold badges6161 silver badges133133 bronze badges asked Nov 21, 2008 at 8:23 BlankBlank 7,2181313 gold badges5151 silver badges7272 bronze badges 1

• I've discovered that the infinite loop only actually occurs when they mouse over the child during the fade out effect, but that's hard not to do.. If they manage to move very quickly and mouse over before the fade out starts, it will just stay there and not fade out. – Blank Commented Nov 21, 2008 at 8:38

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 6

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 ments, 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... });

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

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.

本文标签： jqueryJavascript quotonMouseOverquot triggering for childrenStack Overflow