I've attached a mouseleave
and a mouseenter
event to a container. This container contains a select and some random text, I pass my mouse over the container and then click on the select, here's what happens on Chrome vs IE 10:
Chrome: mouseleave is not triggered (that's what I want)
IE 10: mouseleave is triggered (bad, bad)
A demo can be found here
I'm looking for a cross browsing solution that would trigger an event only when my mouse is not hovering the container and 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).
jQuery mouseleave() When your mouse cursor leaves the selected element, it triggers the mouseleave event and once the mouseleave event is occurred, it executes the mouseleave() method attached with the event handler function to run. This event is generally used together with mouseenter() event. Syntax: $(selector).
The mouseleave event occurs when the mouse pointer leaves the selected element. The mouseleave() method triggers the mouseleave event, or attaches a function to run when a mouseleave event occurs. Note: Unlike the mouseout event, the mouseleave event only triggers when the mouse pointer leaves the selected elements.
You can simply use the CSS :hover pseudo-class selector in combination with the jQuery mousemove() to check whether the mouse is over an element or not in jQuery. The jQuery code in the following example will display a hint message on the web page when you place or remove the mouse pointer over the DIV element's box.
I am affraid that ideal cross browser solution is not possible with <select>
tag because browsers and their versions differ at option's rendering. Some of them use own untargetable GUI and other HTML elements. The best you can do in this case is custom dropdown menu with hidden input.
BTW. in this case, mouseenter/mouseleave has better behaviour and prevents bubbling compared to mouseover/mouseout
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