如何在悬停时更改 svg 填充

Posted 2023-02-19

【中文标题】如何在悬停时更改 svg 填充

【英文标题】：How to change svg fill on hover

【发布时间】：2021-12-24 13:31:46

【问题描述】：

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

悬停独立工作：

在这里看到： https://jsfiddle.net/02ke4r5v

在我提供的 sn-p 中。

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

在这里看到： 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   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>

【问题讨论】：

您在问题中发布的代码没有这个问题。你应该说清楚的。我发现你的小提琴有问题。

我刚刚更新了链接：jsfiddle.net/hnba7z0d 悬停在代码中不起作用。

悬停单独工作：在这里看到：jsfiddle.net/02ke4r5v 当我将它放在我的代码中时，它不起作用。在这里看到：jsfiddle.net/hnba7z0d

我刚刚更新了帖子。

谢谢。您不妨从问题中删除代码块，因为它没有显示问题。所以没有真正的目的。剪切的首选方法是您将代码编码为minimal reproducible example，类似于我在回答中所做的。

【参考方案1】：

您的问题是您在悬停时设置了原始退出 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   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   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   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   viewBox="-144 -144 288 288">
    <use href="#exit" />
  </svg>
</button>

【参考方案2】：

您的代码运行正常。

jsfiddle

以jsfiddle为例

.thePlay:hover svg
  fill:green;

jsfiddle

【讨论】：

X 按钮，不是播放按钮。 X 关闭按钮

检查第一个jsfiddle？

【参考方案3】：

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

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

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


button:hover 
  background-color: #b91d19;