Why do mouseenter / mouseleave events fire when input / output of child elements in SVG?

Question

I have an SVG inside which there is more SVG with a variable number of direct elements inside them, all of which are generated from the data object. Here's the general hierarchy:

<svg class="parent-svg"> <svg class="child-svg"> <rect /> <rect /> </svg> <svg class="child-svg"> <rect /> <rect /> </svg> </svg> 

I linked the mouseenter / mouseleave events to the .child-svg elements, but found that the events are .child-svg when my mouse goes into space between the <rect> elements. My understanding of mouseenter / mouseleave is that they should not fire when the cursor enters / leaves children - this is similar to the behavior you expect from mouseover / mouseout. And, of course, I would like the mouseenter / mouseleave events to fire only after I leave each section (which I described with colors).

Here's the corresponding fiddle: http://jsfiddle.net/ysim/yVfuK/4/

Edit: I tried giving the .child-svg elements height and width, but that didn't work either: http://jsfiddle.net/ysim/gMXuU/3

Edit: Here is the fiddle with the solution, fixed as per @pornel's suggestion: http://jsfiddle.net/ysim/HUHAQ/ p>

Thanks!

Answer 1

I assume .child-svg does not have any area on its own, so there is no way to visit it directly. When the mouse exits <rect> , it also leaves .child-svg .

SVG does not have a stream layout, so children do not affect the size of the parent element.

---

Here's the solution: http://jsfiddle.net/gMXuU/4/

• add <rect> without filling as background
• add pointer-events:all so that the invisible element is "visible" to the mouse pointer