鼠标悬停时链接闪烁
我有一个图像，在图像上我放置了一个超链接。现在，当用户鼠标进入图像时，该超链接需要显示，如果再次离开图像，该超链接需要隐藏。我做的很简单。
问题是，隐藏/显示效果很好。显示超链接后，我需要单击该超链接才能进入下一页。但是超链接的鼠标悬停会使链接闪烁。它闪烁。如何解决这个问题？
我写的代码是：
$('img.col-image1').mouseenter(function(){
$(this).siblings('a.plus-sign').show();
}).mouseleave(function(){
$(this).siblings('a.plus-sign').hide();
}
)
我的代码有什么问题吗？或者我需要添加任何特殊的事件处理程序以避免链接上鼠标悬停时闪烁？
请访问这里：
I have a image, on the image i placed a hyperlink. Now while user mouse enter into image, that hyperlink need to show, if the leave the image again the hyperlink need to hide. it is very simple i did.
the issue is, the hide/show work well. after showing the hyperlink, i need to click on that hyperlink to go next page. But the onmouseover of the hyperlink get flickering the link. it blinking. how to solve this issue?
my code which i wrote is :
$('img.col-image1').mouseenter(function(){
$(this).siblings('a.plus-sign').show();
}).mouseleave(function(){
$(this).siblings('a.plus-sign').hide();
}
)
is any issue with my code or i need to add any special event handler to avoid the flickering onmouseover on link?
please visit here :
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（4）
我分叉了你的解决方案，并提出了一个在 Firefox 中工作的解决方案： http://jsfiddle.net/4mhGb/
I forked your solution and came up with one that worked in Firefox: http://jsfiddle.net/4mhGb/
我认为你的处理方式是错误的（正如我自己所做的那样）。
对于像这样简单的事情，你可以使用 CSS 来完成。如果您想使用 jQuery.fadeIn 和 jQuery.fadeOut 为其添加动画效果，那么我会使用 JavaScript 而不是 CSS。
请参阅我在 jsfiddle 上的示例： http://jsfiddle.net/5pgvC/2/
我包装了图像和另一个 div 中的链接：
然后为其添加 :hover CSS：
这将停止闪烁。
I think your going about this the wrong way (As I've done myself).
For something as simple as this you could do it with CSS. If you wanted to animate it using jQuery.fadeIn and jQuery.fadeOut then I would use JavaScript over CSS.
See my example on jsfiddle: http://jsfiddle.net/5pgvC/2/
I wrapped the image and the link within another div:
Then added :hover CSS for it:
This will stop the flickering.
使用
IE6时会出现闪烁事件
use
as IE6 suffer from flickering event
我认为包装悬停的项目会更语义化（而不是将悬停事件附加到单独的元素）。
演示： http://jsfiddle.net/wdm954/zS3rc/2
添加到 CSS...
jQuery...
I think it would be more semantic to wrap the items being hovered (instead of attaching hover events to separate elements).
Demo: http://jsfiddle.net/wdm954/zS3rc/2
Add to CSS...
jQuery...