如何在懸停時更改按鈕中的嵌入影像？

我有一個像這樣設定的 HTML 按鈕：

如何在懸停時將影像顏色設定為紅色以防止其消失效果？

https://jsfiddle.net/s7dLwp0r/

.btn {
  background-color: red;
  background-color: red;
  height: 39px;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  margin-bottom: 10px;
  margin-top: 5px;
  border: 1px solid red;
  text-transform: uppercase;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
  width: 100%;
}

.btn:hover {
  background-color: white;
  border: 1px solid red;
  color: red;
  text-transform: uppercase;
}

<button class="btn">
<img src="data:image/svg xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxOS4xMDciIGhlaWdodD0iMjQuOTc3IiB2aWV3Qm94PSIwIDAgMTkuMTA3IDI0Ljk3NyI PGRlZnM PHN0eWxlPi5hLC5ie2ZpbGw6bm9uZTtzdHJva2U6I2ZmZjtzdHJva2UtbWl0ZXJsaW1pdDoxMDtzdHJva2Utd2lkdGg6MS41cHg7fS5he3N0cm9rZS1saW5lY2FwOnJvdW5kO308L3N0eWxlPjwvZGVmcz48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwLjc1IDAuNzUpIj48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSg0LjEyOSAxMS42MDgpIj48bGluZSBjbGFzcz0iYSIgeDI9IjkuMzQ2IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwIDApIi8 PGxpbmUgY2xhc3M9ImEiIHgyPSI5LjM0NiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCAzLjQ0NSkiLz48bGluZSBjbGFzcz0iYSIgeDI9IjkuMzQ2IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwIDYuODkxKSIvPjwvZz48cGF0aCBjbGFzcz0iYiIgZD0iTTU2MTUuMjM0LDEwOTMuMDE5SDU2MDMuNzlsLTQuNTM3LDMuOTM3djE3LjkxNGExLjYzLDEuNjMsMCwwLDAsMS42MjUsMS42MjVoMTQuMzU2YTEuNjMxLDEuNjMxLDAsMCwwLDEuNjI2LTEuNjI1di0yMC4yMjZBMS42MywxLjYzLDAsMCwwLDU2MTUuMjM0LDEwOTMuMDE5WiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTU1OTkuMjUzIC0xMDkzLjAxOSkiLz48cGF0aCBjbGFzcz0iYiIgZD0iTTU2MDkuNTY5LDEwOTMuNzkydjVoLTMuMDUzIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtNTYwMy41NjUgLTEwOTMuNDc4KSIvPjwvZz48L3N2Zz4="  alt="order"/>
&nbsp;order
</button>

uj5u.com熱心網友回復：

或者，您可以使用 SVG 作為影像源，然后按如下方式定義填充顏色：

.btn:hover svg {
   fill: green;
}

uj5u.com熱心網友回復：

在按鈕懸停在影像上時使用反轉過濾器。

JS小提琴

為了將來的更改，您可以在本網站上輸入您想要的顏色，然后將其用作過濾器

.btn {
  background-color: #C40000;
  background-color: #C40000;
  height: 39px;
  color: #FFFFFF;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  margin-bottom: 10px;
  margin-top: 5px;
  border: 1px solid #C40000;
  text-transform: uppercase;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
  width: 100%;
}

.btn:hover {
  background-color: white;
  border: 1px solid red;
  color: red;
  text-transform: uppercase;
}

.btn:hover>img {
  filter: invert(44%) sepia(100%) saturate(1313%) hue-rotate(312deg) brightness(93%) contrast(101%);
}

<button class="btn">
<img src="data:image/svg xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxOS4xMDciIGhlaWdodD0iMjQuOTc3IiB2aWV3Qm94PSIwIDAgMTkuMTA3IDI0Ljk3NyI PGRlZnM PHN0eWxlPi5hLC5ie2ZpbGw6bm9uZTtzdHJva2U6I2ZmZjtzdHJva2UtbWl0ZXJsaW1pdDoxMDtzdHJva2Utd2lkdGg6MS41cHg7fS5he3N0cm9rZS1saW5lY2FwOnJvdW5kO308L3N0eWxlPjwvZGVmcz48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwLjc1IDAuNzUpIj48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSg0LjEyOSAxMS42MDgpIj48bGluZSBjbGFzcz0iYSIgeDI9IjkuMzQ2IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwIDApIi8 PGxpbmUgY2xhc3M9ImEiIHgyPSI5LjM0NiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCAzLjQ0NSkiLz48bGluZSBjbGFzcz0iYSIgeDI9IjkuMzQ2IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwIDYuODkxKSIvPjwvZz48cGF0aCBjbGFzcz0iYiIgZD0iTTU2MTUuMjM0LDEwOTMuMDE5SDU2MDMuNzlsLTQuNTM3LDMuOTM3djE3LjkxNGExLjYzLDEuNjMsMCwwLDAsMS42MjUsMS42MjVoMTQuMzU2YTEuNjMxLDEuNjMxLDAsMCwwLDEuNjI2LTEuNjI1di0yMC4yMjZBMS42MywxLjYzLDAsMCwwLDU2MTUuMjM0LDEwOTMuMDE5WiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTU1OTkuMjUzIC0xMDkzLjAxOSkiLz48cGF0aCBjbGFzcz0iYiIgZD0iTTU2MDkuNTY5LDEwOTMuNzkydjVoLTMuMDUzIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtNTYwMy41NjUgLTEwOTMuNDc4KSIvPjwvZz48L3N2Zz4="  alt="order"/>
&nbsp;order
</button>

標籤：html css

上一篇：如何顯示影像一半和滑鼠懸停移動完整影像

下一篇：通過偽元素在css檔案中使用圖示