jQuery 闪烁 mouseOver 问题

发布于 2024-11-15 13:29:55 字数 465 浏览 2 评论 0原文

我有一张图像,上面显示了标题。标题浮动在图像上方并显示在底部。

我有一个 jQuery 事件,当您将鼠标悬停在图像上时,它会显示标题。就像这样:

function showCaption(id) {
var theID = "#caption_" + id;
$(theID).fadeIn('200');
}

当你推出时:

function hideCaption(id) {
var theID = "#caption_" + id;
$(theID).fadeOut('200');
}

但是,当你滚动标题时,它认为你已经推出图像并淡出。有办法解决这个问题吗?

这是一个链接:示例

谢谢,库尔顿

I have a image that has a caption displayed on it. The caption floats over the image and is displayed at the bottom.

I have a jQuery event that when you rollover the image, it displays the caption. Like so:

function showCaption(id) {
var theID = "#caption_" + id;
$(theID).fadeIn('200');
}

And when you roll out:

function hideCaption(id) {
var theID = "#caption_" + id;
$(theID).fadeOut('200');
}

However, when you rollover the caption, it thinks that you have rolled out of the image and fades out. Is there anyway to fix this?

Here's a link: Example

Thanks, Coulton

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

指尖凝香 2024-11-22 13:29:55

我查看了你的 JS,但我找不到触发标题显示的内容 - 你应该将事件绑定到图像的父 div,这样它就不会淡出。如果它当前仅绑定到图像,那就是您的问题。 PS - 包含代码示例总是有帮助的。

I took a look at your JS but I couldn't find what triggers the display of the caption - you should be binding the event to the parent div of the image, that way it won't fade out. If it is currently bound to just the image, that's your problem. P.S - it always helps to include a code example.

毁我热情 2024-11-22 13:29:55

这是一个小提琴,它展示了如何做到这一点的示例。当鼠标进入该元素时,它只是在该标题元素上调用 stop

$("#caption").mouseover(function() { 
    $(this).stop(); 
});

stop 函数取消在所选元素(在本例中为标题元素)上运行的任何动画)。

Here is a fiddle that shows an example of how you could do it. It simply calls stop on the caption element when the mouse enters that element:

$("#caption").mouseover(function() { 
    $(this).stop(); 
});

The stop function cancels any animation that is running on the selected element (in this case, the caption element).

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文