Javascript“onMouseOver”触发儿童？答案

【问题标题】：Javascript "onMouseOver" triggering for children?Javascript“onMouseOver”触发儿童？
【发布时间】：2008-11-21 08:23:11
【问题描述】：

我不知道这是否是我正在使用的 jQuery 的结果，但这是我想要做的：

<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>

对于熟悉基本 CSS 和 jQuery 的任何人，我正在尝试在我的工具提示中添加一个简单的动画。问题是这种动画的触发。似乎当动画发生时，如果用户将鼠标移到工具提示上，则动画将进入显示和隐藏的循环，直到用户将鼠标移开。这是一个不受欢迎的效果，因为我希望动画只消失一次，当鼠标移出 parent div 时。我已经定位了我的 CSS，以便工具提示远离父 div，但无论如何操作都应该只在父 div 上触发，而不是在它的任何子上触发。

所以基本上，我将如何实现这一目标？我希望我的父元素上的悬停/退出状态触发该父级的子级的功能（动画），而不需要子级的悬停/退出状态做任何事情。似乎onMouseOver 和onMouseOut 的正常方法甚至对于该方法所属的父级的子级都在触发，这造成了一些相当不良的影响。

请注意，我是 jQuery 的新手（尽管到目前为止它令人惊叹，但如果可以的话，我想用它的优点来覆盖我的网站），如果有更好的方法来使用 jQuery 实现悬停/退出状态，我可能不会不知道他们。

【问题讨论】：

我发现只有当他们在淡出效果期间将鼠标悬停在孩子上时才会真正发生无限循环，但这很难不做到。如果他们设法做到在淡出开始之前快速移动并将鼠标悬停在上面，它只会停留在那里而不是淡出。

标签： javascript jquery parent-child jquery-events

【解决方案1】：

编辑：实际上这是一个更好的解决方案 (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：作为对 cmets 的回应，我想我会建议您以不同的方式构建 HTML，或者将事件绑定到兄弟元素（图像）：

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

或绑定在图片上：

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

【讨论】：

看起来不错，等我上班不迟到的时候试试。 ;-) 谢谢
这确实是更好的鼠标悬停工具提示代码，但它仍然不能解决我的问题：当用户将鼠标悬停在工具提示本身时仍然会触发鼠标悬停，并且它应该只在用户悬停时触发工具提示指向的东西。

【解决方案2】：

你关注这个tutorial了吗？

尤其是mousemove部分，他不断地设置定位值left和top来对齐光标旁边的tooltip。 X 和 Y 坐标通过 .pageX 和 .pageY 调用。而且他还添加了 15 px 的小偏移量，因此工具提示不会直接位于光标下方。

这样，鼠标不能在工具提示上，即使是淡出阶段。因此没有无限循环

【讨论】：

不，我没有遵循该教程。如果可能的话，我实际上更希望我的工具提示留在页面上，尽管我可以没有它。

【解决方案3】：

将其绑定到父 div，并使用 stopPropagation 阻止它绑定到您的工具提示。像这样：

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

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

// 隐藏工具提示以开始 $('.info div').hide(); [/代码]

不过，我也使用 pageX 和 pageY 让工具提示随光标移动。

【讨论】：