我不知道这是否是我使用的 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 实现悬停/离开状态,我可能不会了解他们。
最佳答案
编辑:实际上这是一个更好的解决方案(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... });
关于Javascript "onMouseOver"触发 child ?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/308175/