div 的 jQuery SlideDown 立即覆盖在图像 SlideUp 上

发布于 2024-11-18 15:00:32 字数 421 浏览 5 评论 0原文

我正在尝试在图像上创建一个叠加层,当将鼠标悬停在图像上时,该叠加层会滑入和滑出。与此问题相同的原因 - JQuery Text slipDown / slipUp Overlay on Image一直弹跳?

我已将代码放在 jsFiddle 中,以便可以访问 - http://jsfiddle.net/jamescallaghan/hg9r7/< /a>

任何帮助将不胜感激。

I'm trying to create an overlay on a image that slides in and out when hovering over the image. Same reason as this question - JQuery Text slideDown / slideUp Overlay on Image Keeps Bouncing?.

I have placed my code in jsFiddle so it is accesible - http://jsfiddle.net/jamescallaghan/hg9r7/

Any help would be much appreciated.

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

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

发布评论

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

评论(2

苹果你个爱泡泡 2024-11-25 15:00:32

我认为您遇到的问题是悬停是基于图像元素而不是 .slide,因此当文本面板向上滑动时它会覆盖图像,当您移动鼠标时它会充当悬停/取消悬停。

请看一下这个,我刚刚更新了你的代码。应该适用于多张幻灯片:) 希望这有帮助!

http://jsfiddle.net/NuWna/2/

祝一切顺利,
安东尼

I think the issue you were having was that the hover was based off the image element and not the .slide so when that text panel slid upwards it covered the image and when you moved the mouse it acted as a hover/unhover.

Please take a look at this, i just updated your code a bit. should work with multiple slides :) Hope this helps!

http://jsfiddle.net/NuWna/2/

All the best,
Anthony

青丝拂面 2024-11-25 15:00:32

您可能应该对每个功能使用 mouseenter 和 mouseleave。

唯一的问题是,如果鼠标位于向上滑动的新 div 上,它就会向下滑动。所以你需要解决这个问题。

这是部分修复:

http://jsfiddle.net/hg9r7/3/

编辑:实际上是您的代码已经完成的操作,因此没有真正的改进。您的代码的问题是,您的鼠标光标有时会越过您正在拉起的框,这意味着您要离开 .slide img

You should probably use mouseenter og mouseleave for each function.

the only issue is that if the mouse is over the new div you slide up, it will slide down. so you need to fix that.

this is a partial fix:

http://jsfiddle.net/hg9r7/3/

edit: actually that is what you code already did, so no real improvement. the issue with your code, is that your mouse cursor sometimes goes over the box you are pulling up and that means you are leaving .slide img

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