如何在悬停时更改 svg 填充

Question

我正在尝试让悬停在 X 关闭按钮 上起作用。

悬停独立运行：

在我提供的片段中。

当我将它放入我的代码中时，它不起作用。

看到这里： https://jsfiddle.net/hnba7z0d/

.exit {
  top: auto;
  bottom: -47.63px;
  margin: auto;
  right: 0;
  left: 0;
  width: 47.63px;
  height: 47.63px;
  cursor: pointer;
  border: none;
  background: none;
  padding: 0;
  border-radius: 50%;
  animation: fadeInExit 2s forwards 0s;
  opacity: 0;
  pointer-events: none;
  clip-path: circle(50%);
}

@keyframes fadeInExit {
  99% {
    pointer-events: none;
  }
  100% {
    pointer-events: initial;
    opacity: 1;
  }
}

.exit:hover .exitHover {
  fill: green;
}

<button class="exit" type="button" aria-label="Close">
  <svg width="100%" height="100%" viewBox="-144 -144 288 288">
    <g id="exit">
      <title>exit</title>
      <path class="exitHover" d="m-143 0a143 143 0 1 1 286 0 143 143 0 0 1 -286 0m128-112a113 113 0 0 0 -97 97h97zm-97 127a113 113 0 0 0 97 97v-97zm127 97a113 113 0 0 0 97 -97h-97zm97-127a113 113 0 0 0 -97 -97v97z" transform="rotate(45)" fill="red" />
    </g>
  </svg>
</button>

Answer 1

首先，尝试访问这个link[svg change color on hover]。它描述了您可能需要的解决方案。

此外，我将添加我正在使用的一个按钮的 css。当我将鼠标悬停在它上面时，颜色会改变。尝试只使用 Button:hover 和背景颜色的 css 属性。

button {
  background-color: red;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  float: right;
}

button:hover {
  background-color: #b91d19;
}

Answer 2

您的代码运行正常。

jsfiddle

关于jsfiddle的例子

.thePlay:hover svg{
  fill:green;
}

jsfiddle

Answer 3

您的问题是您在悬停时设置原始退出 SVG 的样式。那个特定的应该工作。

但是所有其他使用 <svg><use> 的按钮将不起作用，因为当您将鼠标悬停在它们上方时，鼠标事件不会传递到原始按钮（use 指向） .

相反，您应该将悬停规则附加到 <svg><use> 元素。你可以给它们应用一个样式，它会被原来使用的实例继承。

.exit {
  width: 47.63px;
  height: 47.63px;
  border: none;
  background: none;
  padding: 0;
}


.exit:hover svg {
  fill: green;
}

<p>original</p>
<button class="exit" type="button" aria-label="Close">
  <svg width="100%" height="100%" viewBox="-144 -144 288 288">
    <g id="exit">
      <title>exit</title>
      <circle class="exitCircle" cx="0" cy="0" r="144" fill="transparent"/>
      <path class="exitHover" d="m-143 0a143 143 0 1 1 286 0 143 143 0 0 1 -286 0m128-112a113 113 0 0 0 -97 97h97zm-97 127a113 113 0 0 0 97 97v-97zm127 97a113 113 0 0 0 97 -97h-97zm97-127a113 113 0 0 0 -97 -97v97z" transform="rotate(45)" fill="red" />
    </g>
  </svg>
</button>

<p>&lt;use&gt;</p>
<button class="exit" type="button" aria-label="Close">
  <svg width="100%" height="100%" viewBox="-144 -144 288 288">
    <use href="#exit" />
  </svg>
</button>

但是，如果您尝试这样做，您会发现它仍然不起作用。这是因为 fill 的值被路径已有的 fill="red" 属性覆盖。

解决方案是删除 fill="red" 属性并使用 CSS.

为该路径提供默认的红色样式

.exit svg {
  fill: red;
}

.exit:hover svg {
  fill: green;
}

.exit {
  width: 47.63px;
  height: 47.63px;
  border: none;
  background: none;
  padding: 0;
}


.exit svg {
  fill: red;
}

.exit:hover svg {
  fill: green;
}

<p>original</p>
<button class="exit" type="button" aria-label="Close">
  <svg width="100%" height="100%" viewBox="-144 -144 288 288">
    <g id="exit">
      <title>exit</title>
      <circle class="exitCircle" cx="0" cy="0" r="144" fill="transparent"/>
      <path class="exitHover" d="m-143 0a143 143 0 1 1 286 0 143 143 0 0 1 -286 0m128-112a113 113 0 0 0 -97 97h97zm-97 127a113 113 0 0 0 97 97v-97zm127 97a113 113 0 0 0 97 -97h-97zm97-127a113 113 0 0 0 -97 -97v97z" transform="rotate(45)" />
    </g>
  </svg>
</button>

<p>&lt;use&gt;</p>
<button class="exit" type="button" aria-label="Close">
  <svg width="100%" height="100%" viewBox="-144 -144 288 288">
    <use href="#exit" />
  </svg>
</button>

如何在悬停时更改 svg 填充

How to change svg fill on hover

css

svg

hover

fill