如何更改鼠标上的图像 hover

Question

I am a beginner. I am working on this webpage salesletter . I am trying to change the button color of the add-to-cart buttons by changing their image on mouseover. I am unable to do so with though with my limited knowledge and google isn't able to help me this time. I'd like to ask for your help on how I am going to be able to do this. I tried some codes that I found on google but they dont work. I have no knowledge of JS btw. Thanks!

Update: thanks for the help of Jan Kees, I was able to accomplish the goal however, there is a problem. here is my current code:

 .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>

Now the problem is the image change does not immediately take effect. I need to hover multiple times on the image before it actually works properly.

Answer 1

You can do this easily using Javascript

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

or you can use html only

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

Answer 2

That's using the adjacent sibling combinator ( + ).

 .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>