jQuery:鼠标悬停打开灯箱，但鼠标悬停无法正确关闭它 [英] JQuery : mouseover open a lightbox but mouseout can't close it correctly

问题描述

我在我的一个网站上将colorbox用作灯箱. 当鼠标悬停在图片上方时，我已经能够使其打开灯箱，但是当鼠标停留在同一张图片上时，我无法使其关闭灯箱.

I'm using colorbox as a lightbox on one of my website. I have been able to make it opening a lightbox when my mouse is over a picture, but I can't make it close the lightbox when my mouse leave the same picture.

如果我移动鼠标，一旦打开灯箱，mouseleave事件就会触发，因为鼠标仍在图片上.

As soon as my lightbox is opened if I move my mouse, the mouseleave event is trigerred event is my mouse is still on the picture.

这里是一个JSfiddle来向您展示我的问题: http://jsfiddle.net/8ByeT/1/

Here is a JSfiddle to show you my issue : http://jsfiddle.net/8ByeT/1/

您对解决方法有任何想法吗?

Do you have any idea on how to solve that?

感谢和问候， 埃里克

推荐答案

这是一个有效的小提琴: http://jsfiddle.net/8ByeT/15/

Here's is a working fiddle: http://jsfiddle.net/8ByeT/15/

更新:

css:叠加的div显示设置为无，因此不会触发鼠标离开事件

css: overlaying div display set to none, so it won't trigger mouse leave event

JS:为色箱添加了初始宽度和高度，因此出现的图像不会覆盖您的图像.

JS: added initial width and height for colorbox, so the appearing image won't cover your image.

这篇关于jQuery:鼠标悬停打开灯箱，但鼠标悬停无法正确关闭它的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！