Javascript“onMouseOver”触发儿童？

我不能告诉如果这是我使用jQuery的结果，但是这是我想要做的事：Javascript“onMouseOver”触发儿童？

<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，但是不管这些操作只应触发父项，而不是其任何子项。

所以基本上，我会如何去实现这一目标？我希望在父元素上悬停/跳出状态，以触发该父项子项的功能（动画），而不需要孩子悬停/跳出状态。看来，onMouseOver和onMouseOut的正常方法甚至会触发该方法所属的父级子元素，这会导致一些相当不利的效果。

请注意，我是jQuery的新手（尽管目前为止令人惊叹，但如果可以的话，我希望将我的网站置于其良好状态），并且如果有更好的方法可以使用jQuery来实现悬停/跳出状态，我可能不知道他们。^_^

感谢

来源

2008-11-21 Nicholas Flynt

我发现无限循环实际上只发生在淡出效果期间鼠标悬停在儿童身上，但这很难*不*要做..如果他们设法快速移动并在淡出之前移动鼠标开始，它会停留在那里而不是淡出。 – 2008-11-21 08:38:10

编辑：其实这是一个更好的解决方案（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... });

来源

2008-11-21 08:45:29 Owen

看起来不错，稍后当我不迟到工作时我会尝试。 ;-)谢谢 – 2008-11-21 15:32:33

你按照这个tutorial？

特别是mousemove部分，他不断地将定位值左侧和顶部对齐光标旁边的工具提示。 X和Y坐标通过.pageX和.pageY调用。而且他还添加了15 px的一点偏移量，所以工具提示不直接位于光标下方。

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

来源

2008-11-21 08:39:39 VonC

不，我没有按照该教程。如果可能的话，我实际上更希望我的工具提示能够保留在页面上，尽管我可以没有这些。 – 2008-11-21 08:43:32

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

来源

2008-11-22 02:01:27

将其绑定到父DIV，并使用stopPropagation从被绑定到你的提示停止。是这样的：。

[代码] $（ '信息 '）结合（' 鼠标悬停'，函数（E）{ e.stopPropagation（）; $（这> 'DIV'）示出（”正常'）; }）;

$（'。info'）。bind（'mouseout'，function（）{（this>'div'）。hide（'normal'）; }）;

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

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

来源

2010-09-18 12:20:42

Javascript“onMouseOver”触发儿童？

回答

相关问题