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: /

Edit: I tried giving the .child-svg elements a height and width, but that didn't seem to work either:

Edit: Here's the fiddle with the solution, fixed according to @pornel's suggestion: /

Thanks!

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/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/ysim/gMXuU/3

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

Thanks!

• javascript
• jquery
• svg
• d3.js
• mouseenter

• What browser are you using? It seems to have the desired effect for me. – musicnothing Commented Jun 21, 2013 at 22:09
• 3 Read about event propagation stackoverflow./questions/4616694/… – Givi Commented Jun 21, 2013 at 22:13
• Is that really SVG-in-SVG rather than <g>? – Kornel Commented Jun 21, 2013 at 22:56
• @AlexMorrise: I tried it on Chrome, Firefox, and Safari... it didn't work on any of them. Which browser are you using? – 3cheesewheel Commented Jun 22, 2013 at 1:34
• @porneL: Yes, it's definitely SVG-in-SVG. I tried it with <g> and it seems that the mouseenter event handler is bound to each of its child elements, which isn't what I want. – 3cheesewheel Commented Jun 22, 2013 at 18:42

1 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.

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