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懸停狀態與多個元素

回答

相關問題