如何在懸停時更改svg填充

我試圖讓懸停在X Close Button 上作業。

懸停本身獨立作業：

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

在我提供的片段中。

當我把它放在我的代碼中時它不起作用。

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

uj5u.com熱心網友回復：

您的問題是您在懸停時設定了原始退出 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>

uj5u.com熱心網友回復：

首先，嘗試訪問此鏈接[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;
}

uj5u.com熱心網友回復：

您的代碼作業正常。

提琴手

以jsfiddle為例

.thePlay:hover svg{
  fill:green;
}

提琴手

標籤：css svg 徘徊 填

上一篇：如何在svg圓內渲染n個切片？

下一篇：如何在路徑內的圓圈上應用指標事件？