Check this fiddle out: http://jsfiddle.net/abitdodgy/7rFb6/1/
When you move the cursor fast the mouseleave
event does not register at times. Why is this happening?
When you hover over a selected image, a .controls
layer appears that allows you to remove the selection. Once you unhover, though, the .controls
layer should disappear. This does not always happen if you move the cursor really fast between the layers.
Try selecting the images and move the cursor very quickly between them and you will notice that this is happening. If the image is selected, the layer .controls
should not be visible unless you are hovering over it.
Any ideas?
The mouse leave event will be triggered whenever the mouse cursor leaves from the selected element and after the occurrence of the event, it implements a mouse leave event that has been attached to an event handler function to run.
The onmouseover event occurs when the mouse pointer is moved onto an element, or onto one of its children.
This means that mouseleave is fired when the pointer has exited the element and all of its descendants, whereas mouseout is fired when the pointer leaves the element or leaves one of the element's descendants (even if the pointer is still within the element).
The mouseout event is fired at an Element when a pointing device (usually a mouse) is used to move the cursor so that it is no longer contained within the element or one of its children.
Try to bind the mouseleave
event to the wrapper div and not to the single element, since it's not hovered on .controls
show()
trigger.
Is this sample working for you?
I suggest to add z-index: 2;
to the .controls
elements, as well.
I RAPIDLY as hell moved my laser mouse over all of them and they INSTANTLY responded. Seems the issue is related to the limitations of your hardware rather than some specific issue with the software I'm sorry to say.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With