为什么 :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>

考虑以下 SVG 代码：

当您将鼠标悬停在每个上时元素，它们各自的形状将根据其 :hover 规则中指定的颜色将颜色更改为绿色、红色或蓝色。

以上是为什么 :hover 样式不适用于 SVG `` 元素，我该如何解决这个问题？的详细内容。更多信息请关注PHP中文网其他相关文章！