Javascript"onMouseOver"触发儿童？

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

编辑:实际上这是一个更好的解决方案(信用):

$('.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... });