如何在悬停时更改按钮中的图像？

Question

我试图更改鼠标悬停时按钮上的图像，但是，我在网上找到的所有内容都使用 css 中的背景图像，我不想要那个，它使用了所有 space在按钮中。我希望它只将初始图像与最终图像交换，这是因为，在我的网页的移动版本中，我希望它更改按钮的背景颜色并使用相同的图像但颜色不同的图像进行更改。 .到目前为止，我得到了这个：

HTML 和 CSS

.btnExample{
   width: 60px;
  height: 60px;
  text-decoration: none;
  display: inline-block;
  outline: none;
  cursor: pointer;
  border-style: 3px #01509f;
  color: black;
  background-color: #fff;
  border-radius: 100%;
  margin-left: 20px;
  
  text-align: center;
 
}

.btnExample:hover{
  background-color: #000;
}

<button class="btnExample"  >
    <img src="https://www.pngfind.com/pngs/m/2-24642_imagenes-random-png-cosas-random-png-transparent-png.png" width="18" height="18" alt=""/></button>

这会在我的按钮中插入一个图像而不是背景图像，并将背景颜色从白色更改为黑色。现在，如何在鼠标悬停时将其替换为另一张图片？

Answer 1

您可以在当前的img标签下使用另一个img标签，并使用不同的类，这样它们就可以用于不同的目的，如下所示。

<button class="btnExample">
    <img class="init_img" src="https://www.pngfind.com/pngs/m/2-24642_imagenes-random-png-cosas-random-png-transparent-png.png" width="18" height="18" alt=""/>
    <img class="hover_img" src="Screenshot_2.png" width="18" height="18" alt=""/> <!-- Add the hover image URL here -->
</button>

额外CSS：

.hover_img {
    display: none;
}
.btnExample:hover .hover_img {
    display: inline-block;
}
.btnExample:hover .init_img {
    display: none;
}

否则，我认为您可以使用 JS/jQuery 在悬停时显示不同的图像，因为无法使用 CSS.[=12= 显示来自同一 img 标签的不同图像。 ]

如何在悬停时更改按钮中的图像？

How to change the image in my button on hover?

html

css

button

hover