如何在鼠标悬停时更改图像

Question

我是初学者。我正在处理这个网页 salesletter。我正在尝试通过更改鼠标悬停时的图像来更改添加到购物车按钮的按钮颜色。 虽然我的知识有限，但我无法这样做，而且这次谷歌无法帮助我。我想就如何做到这一点寻求您的帮助。我尝试了一些在谷歌上找到的代码，但它们不起作用。顺便说一句，我对JS一无所知。谢谢！

更新：感谢 Jan Kees 的帮助，我能够完成目标，但是出现了问题。这是我当前的代码：

.add-2-cart {
  max-width: 60%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 0%;
  padding-right: 0%;
  transition: .5s ease;
  -webkit-box-shadow: 0px 0px;
  box-shadow: 0px 0px;
}

.add-2-cart:hover {
  transform: scale(1.1);
}

<div class="add-2-cart col-flex-fullwidth">
  <a href="https://www.digistore24.com/product/394232" target="_blank">
    <img src='images/a2c-1btl-am.png' onmouseover="this.src='images/a2c-1btl-amh.png'" onmouseout="this.src='images/a2c-1btl-am.png'" class="fluid-img">
  </a>
</div>

现在的问题是图像更改不会立即生效。我需要在图像上多次悬停才能真正正常工作。

Answer 1

这是使用相邻兄弟组合器 (+)。

.image {
  height: 100px;
}

.btn {
  padding: 10px;
  background: orange;
  width: 50px;
}

.image:hover+.btn {
  background: red;
}

<img class="image" src="https://www.vectorlogo.zone/logos/stackoverflow/stackoverflow-tile.svg">
  <div class="btn">button</div>
</img>

或

如果整张卡片是一张图片，您可以更改 css 中的内容。

img {
  height: 150px;
}

img:hover {
  content: url("https://tryslimleaf.com/d24/images/a2c-6btl-amh.png");
  transform: scale(1.1);
}

<img src="https://tryslimleaf.com/d24/images/a2c-6btl-am.png">

Answer 2

您可以使用 Javascript 轻松做到这一点

<img src='LibraryTransparent.png' onmouseover="this.src='picture_mouseo_hover.png';" onmouseout="this.src='picture_no_hover.png';" />

或者你可以只使用html

<img 
    src='normalpic.png' 
    onmouseover="this.src='picture_on_hover.png'"
    onmouseout="this.src='normalpic.png'"
    height="100px"
    width="100px"
>