Javascript "onMouseOver"触发 child ？

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

那么基本上，我将如何实现这一目标？我希望我在父元素上的悬停/离开状态能够触发该父元素的子元素上的功能(动画)，而不需要 child 的悬停/离开状态做任何事情。似乎 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，或者将事件绑定(bind)到同级元素(图像):

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

或者绑定(bind)在图片上:

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