Question

我不知道这是否是我正在使用的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的人，我试图在我的工具提示中添加一个简单的动画。问题是触发这样的动画。似乎当动画发生时，如果用户将鼠标移到工具提示上，动画将进入显示和隐藏的循环，直到用户将鼠标移开。这是一种不受欢迎的效果，因为当鼠标移出父 div时，我希望动画只消失一次。我已经定位了我的CSS，以便工具提示远离父div显示，但无论动作是应该只触发父节点，而不是它的任何子节点。

基本上，我将如何实现这一目标？我希望我的父元素上的hover / out状态触发父节点的子节点上的函数（动画），而不会让孩子的hover / out状态做任何事情。似乎onMouseOver和onMouseOut的常规方法即使对于该方法所属的父级的子级也会触发，这会导致一些相当不良的影响。

请注意，我是jQuery的新手（尽管到目前为止它很棒，但如果可以的话，我希望能够将我的网站涂上它的优点）并且如果有更好的方法来使用jQuery实现悬停/退出状态我可能不会不知道他们。 ^ _ ^

由于

Answer 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 ：在回复评论时，我想我会建议您以不同的方式构建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... });

Answer 2

这是一篇关于鼠标事件的优秀文章：http://www.quirksmode.org/js/events_mouse.html

Answer 3

您是否按照 tutorial ？

进行了操作

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

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

Answer 4

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

[代码] $（'。info'）。bind（'mouseover'，function（e）{ e.stopPropagation（）; $（这个＆gt;'div'）。show（'normal'）; }）;

$（'。info'）。bind（'mouseout'，function（）{ $（这个＆gt;'div'）。hide（'normal'）; }）;

//隐藏工具提示以开始 $（'。info div'）。hide（）; [/代码]

但是，我也使用pageX和pageY来使我的工具提示随光标移动。

Javascript“onMouseOver”触发儿童？

4 个答案: