Have a look at this jsFiddle
The mouseenter
/mouseleave
don't appear to be firing correctly when using jQuery in conjuction with SVG (Raphael 2.0). I know out of the box SVG jQuery isn't 100% compatible with SVG, however, as far as I can see it only seems to effect IE9.
The weird thing is if you rapidly move your mouse on/off the svg element (making sure you come right off the HTML pane in doing so) and back onto it the events do fire (but not everytime). Just to make sure it wasn't a general problem with on
I hooked up the click
event which works fine, everytime.
Just wondering if anyone knows if this is a bug or even a known issue?
jQuery mouseout() MethodThe mouseout() method triggers the mouseout event, or attaches a function to run when a mouseout event occurs. Note: Unlike the mouseleave event, the mouseout event is triggered if a mouse pointer leaves any child elements as well as the selected element.
The mouseenter() method triggers the mouseenter event, or attaches a function to run when a mouseenter event occurs.. Note: Unlike the mouseover event, the mouseenter event only triggers when the mouse pointer enters the selected element.
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 sent to an element when the mouse pointer leaves the element. Any HTML element can receive this event.
This is a bug in 1.7.2. See ticket.
Problem goes away if I use jQuery (edge) so should be fixed in the next scheduled release (1.8).
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