為什麼 :hover 樣式不適用於 SVG `` 元素，我該如何解決這個問題？

解決使用和:hover 樣式嵌入的SVG 元素

理解問題

嘗試將:hover 樣式應用於使用:hover 嵌入樣式的SVG元素時標籤，可能會遇到困難。這是由於透過 引用的元素的事實。不是正式文件結構的一部分，因此很難直接使用 CSS 選擇器來處理它們。

為什麼 :hover 樣式不起作用

根據 SVG 使用元素規範，CSS 選擇器不能套用於引用元素所在的概念 DOM 樹。這意味著 :hover 偽類對這些元素不起作用，從而阻止您套用互動式樣式。

Firefox 異常

雖然大多數瀏覽器缺乏對通過

使用>，Firefox 是個例外。它允許透過將引用元素中的值設為“currentColor”並更改 的顏色屬性來修改填滿或描邊顏色。

另一種方法

在嵌入式 SVG 元素上實現懸停效果的另一種方法涉及使用「currentColor」。透過將引用元素的填滿或描邊屬性設為「currentColor」並修改的顏色元素懸停時，瀏覽器可以更新繼承的目前顏色。此技術提供了一種解決方法，儘管它不提供 :hover 偽類提供的全部樣式功能。

範例

<svg>
  <style>
    #p0 { fill: currentColor; }
    #use1:hover { color: green; }
    #use2:hover { color: red; }
    #use3:hover { color: blue; }
  </style>

  <defs>
    <polygon>

以上是為什麼 :hover 樣式不適用於 SVG `` 元素，我該如何解決這個問題？的詳細內容。更多資訊請關注PHP中文網其他相關文章！