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

问题描述

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

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>

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

解决方法

您可以在当前标签下面使用另一个 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 显示来自同一 img 标签的不同图像。

button button hover html