时间戳

首页 > 解决方案 > 如何在悬停时更改按钮中的图像？

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

问题描述

我试图在悬停时更改按钮上的图像，但是，我在网上找到的所有图像都使用 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>

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

标签： htmlcssbuttonhover

解决方案

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

推荐阅读