javascript – 悬停时置于前面(当被其他元素遮挡时)

前端之家收集整理的这篇文章主要介绍了javascript – 悬停时置于前面(当被其他元素遮挡时)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

我今天早上看了NYTimes interactive on state subsidies,并注意到即使一个状态被一个点遮挡,它也会在悬停时被提前.

例如,覆盖马萨诸塞州的点也部分覆盖了新罕布什尔州,但是当你进入新罕布什尔州的覆盖部分时,新罕布什尔州就会被提出来.

你觉得他们怎么做到这一点?点基于它们在DOM中的顺序位于状态轮廓的前面.我认为在所有事情的基础上可能会有第二组状态轮廓,听取会触发底层形状的鼠标悬停,但事实似乎并非如此.

我需要在我正在处理的应用程序中实现类似的功能,并对使用SVG元素的优雅方式感到好奇.

谢谢.

最佳答案
As notedAndy那个NYT图形中的圆圈有一个CSS指针 – 事件属性为none:

circle {
    pointer-events: none;
}

使用this method可以在鼠标悬停功能中实现前置行为:

stateShape.on("mouSEOver",function(){this.parentNode.appendChild(this);})
原文链接:https://www.f2er.com/js/429670.html

猜你在找的JavaScript相关文章