Bring <path> to front on hover (when obscured by other element)

Question

I was looking at the NYTimes interactive on state subsidies this morning and noticed that even when a state is obscured by a dot it is brought forward on hover.

For example the dot covering Massachusetts also partially covers New Hampshire, yet when you when you mouse into the covered part of New Hampshire, New Hampshire is brought forward.

How do you suppose they achieve this? The dots are in front of the state outlines based on their order in the DOM. I thought there might be a second set of state outlines on top of everything, listening for mouseovers that would trigger the underlying shape, but that doesn't seem to be the case.

I need to implement similar functionality in an application I'm working on and am curious about an elegant way with SVG elements.

Thanks.

Answer 1

As noted by Andy the circles in that NYT graphic have a CSS pointer-events property of none:

circle {
    pointer-events: none;
}

the bring to front behavior can be achieved in a the mouseover function using this method:

stateShape.on("mouseover",function(){this.parentNode.appendChild(this);})