SVG悬停状态与多个元素

我我的网页上定义SVG具有以下defs。

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

...并使用此在HTML后来实现它：

<svg width="208px" height="180px" viewBox="0 0 208 180" > 
    <use xlink:href="#hexagon"></use> 
    <text class="faicon" x="50%" y="70px" fill="white" font-size="80px" text-anchor="middle">&#xf040</text> 
    <text text-anchor="middle" x="50%" y="70%" fill="white">Logo Here</text> 
</svg>

工作完全正常。我也能够用简单的CSS来设计polygon的填充。看起来是这样的：但是

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

悬停效果失败，只要鼠标离开polygon，而是悬停在任svg中的“文本”元素。有没有办法来定义一个防止这种行为的CSS规则。或者，使用JS/jQuery更改属性会更好（更容易）吗？

谢谢！

来源

2015-05-21 Steven Ryan

您的文本呈现在您的多边形顶部，因此拦截鼠标事件。您应该建立类似

text { 
    pointer-events: none; 
}

这CSS规则将阻止文本成为这应该给你的多边形所期望的效果悬停鼠标事件的目标。

来源

2015-05-21 22:32:42 altocumulus

SVG悬停状态与多个元素

回答

相关问题