Why do the mouseenter/mouseleave events fire when entering/leaving child elements in an SVG?

Question

I have an SVG, inside which there are more SVGs with a variable number of rect elements inside them, all generated from a 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've bound mouseenter/mouseleave events to the .child-svg elements, but I'm finding that the events are firing when my mouse goes to the whitespace in between the <rect> elements. My understanding of mouseenter/mouseleave is that they shouldn't fire when the cursor enters/leaves the child elements -- this seems like behaviour you'd expect from mouseover/mouseout. And of course, what I'd ideally like is for the mouseenter/mouseleave events only to fire when I've left each section (which I've delineated using colours).

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

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

Edit: Here's the fiddle with the solution, fixed according to @pornel's suggestion: http://jsfiddle.net/ysim/HUHAQ/

Thanks!

Answer 1

My guess is that .child-svg doesn't have any area on its own, so there is no way to hover it directly. When mouse leaves <rect> it leaves .child-svg too.

SVG doesn't have flow layout, so children don't affect size of parent element.

---

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

• add a <rect> with no fill as background
• add pointer-events:all to make invisible element "visible" to the mouse pointer