Javascript 具有多个元素的SVG悬停状态

各位下午好,

我在页面上使用以下

defs

定义SVG

<svg width="0" height="0">
    <defs>
        <g id="stroke-hexagon">
            <polygon fill="#002663" stroke="#FFFFFF" stroke-width="6" stroke-miterlimit="12" points="57.8,185 5.8,95 57.8,5 161.8,5 213.8,95 161.8,185 "/>

        </g>

        <g id="hexagon">
            <polygon fill="#006890" points="52,180 0,90 52,0 156,0 208,90 156,180 "/>
        </g>
    </defs>
</svg>

但是，只要鼠标离开

多边形

，而将鼠标悬停在

svg

中的任一“文本”元素上，悬停效果就会失败。有没有办法定义一个CSS规则来阻止这种行为。或者，使用JS/jQuery更改属性会更好（更容易）吗

---

谢谢

文本呈现在多边形顶部，因此拦截鼠标事件。您应该设置一个css规则，如

text {
    pointer-events: none;
}

这将防止文本成为鼠标事件的目标，从而为多边形提供所需的悬停效果

#hexagon:hover polygon {
    fill:#990000;
}

text {
    pointer-events: none;
}