1

我不知道这是否是我正在使用的 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 的位置，但无论如何操作都应该只在父 div 上触发，而不是在它的任何子代上触发。

所以基本上，我将如何实现这一目标？我希望我的父元素上的悬停/退出状态触发该父级的子级的功能（动画），而不需要子级的悬停/退出状态做任何事情。似乎 and 的正常方法onMouseOver甚至onMouseOut对于该方法所属的父级的子级都在触发，这造成了一些相当不良的影响。

请注意，我是 jQuery 的新手（尽管到目前为止它很棒，但如果可以的话，我想用它的优点来覆盖我的网站），如果有更好的方法来使用 jQuery 实现悬停/退出状态，我可能不知道关于他们。

4

3 回答 3

6

编辑：实际上这是一个更好的解决方案（信用）：

$('.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-21T08:45:29.120 回答
0

您是否按照本教程进行操作？

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

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

于 2008-11-21T08:39:39.257 回答
0

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

[代码] $('.info').bind('mouseover', function(e) { e.stopPropagation(); $(this > 'div').show('normal'); });

$('.info').bind('mouseout', function() { $(this > 'div').hide('normal'); });

// 隐藏工具提示以开始 $('.info div').hide(); [/代码]

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

于 2010-09-18T12:20:42.903 回答