為什麼我的 :hover CSS 不適用於嵌入 `` 的 SVG 元素，如何修復它？

透過 設定嵌入的SVG 元素的樣式使用:hover CSS

在您提供的程式碼中，您嘗試使用: hover CSS 設定嵌入式SVG 元素的樣式，但它不適用於使用 引用的群組內的元素。元素。這是因為，根據 SVG 規範，CSS 選擇器無法套用於透過 克隆元素而產生的克隆 DOM 樹。

Firefox 支援與解決方法

Firefox 是唯一支援透過 來定址虛擬元素的瀏覽器。蟲洞。但是，其他瀏覽器則不然。

解決方法是在 時使用 currentColor 將不同的顏色套用於具有填滿或描邊屬性的元素。元素的顏色屬性在懸停時會改變。例如：

#p0 {fill:currentColor}
#use1:hover {color:green}
#use2:hover {color:red}
#use3:hover {color:blue}

可能的替代方案

實現目標的另一種方法是使用 JavaScript 修改滑鼠懸停事件上的 SVG 元素。這將涉及向每個新增事件偵聽器。元素，然後更新每個群組中相關元素的屬性或樣式。

選擇正確的解決方案

與Firefox 相容的CSS 解決方案和JavaScript 之間的選擇基於的方法取決於瀏覽器支援和您專案的特定要求。如果瀏覽器相容性很重要，請使用 JavaScript 方法。否則，您可以選擇 CSS 解決方案，以實現簡單性和易於實施。

進一步注意事項

要在嵌入物件內的特定部分上實現所需的懸停效果，您可能需要使用額外的JavaScript 來修改懸停時每個組內特定元素的屬性或樣式。 JavaScript 為動態元素操作提供了更大的靈活性，讓您可以定位和修改嵌入物件中的各個元素。

以上是為什麼我的 :hover CSS 不適用於嵌入 `` 的 SVG 元素，如何修復它？的詳細內容。更多資訊請關注PHP中文網其他相關文章！