我正在查看 NYTimes interactive on state subsidies今天早上注意到，即使一个状态被一个点遮挡，它也会在悬停时显示出来。
例如，覆盖马萨诸塞州的圆点也部分覆盖了新罕布什尔州，但是当您将鼠标移至新罕布什尔州的覆盖部分时，新罕布什尔州会提前。
您认为他们如何实现这一目标？根据它们在 DOM 中的顺序，点位于状态轮廓的前面。我认为可能在所有内容之上还有第二组状态轮廓，监听会触发基础形状的鼠标悬停，但事实似乎并非如此。
我需要在我正在开发的应用程序中实现类似的功能，并且对使用 SVG 元素的优雅方式感到好奇。
谢谢。
最佳答案
As noted通过 Andy纽约时报图片中的圆圈有一个 CSS pointer-events 属性 none:
circle {
pointer-events: none;
}
可以使用 this method 在鼠标悬停函数中实现置顶行为。 :
stateShape.on("mouseover",function(){this.parentNode.appendChild(this);})
关于javascript - 悬停时将 <path> 置于最前面(当被其他元素遮挡时)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13705895/