I have a list of images and I want to be changed when I hover on it and then change back to the previous image on mouse leave. and each image is different. I have done it but it's not the right way of doing it. and I couldn't figure out the right way.

//html code: its actually long list but I'm just showing two of the list//

```
       <li>
        <div class="card">
              <img class="my-img" id="my-img1" src="./images/AMH010301_G-1-dresslink.jpg" alt="Denim Jeans"onmouseover="hover1()" onmouseout="offhover1()">
              <h1>Lorem1</h1>
              <span class="price-first">$24.99</span>
              <span class="price">$17.99</span>
              <br>
              <span class="fa fa-star checked"></span>
              <span class="fa fa-star checked"></span>
              <span class="fa fa-star checked"></span>
              <span class="fa fa-star"></span>
              <span class="fa fa-star"></span>
              <p>Lorem ipsum dolor sit amet..</p>
              <button class="add-to">Add to Cart</button>
        </div>  
       </li>
       <li>
        <div class="card">
              <img class="my-img" id="my-img2" src="./images/AMH010327_W-1-dresslink.jpg" alt="Denim Jeans" onmouseover="hover2()" onmouseout="offhover3()">
              <h1>Lorem2</h1>
              <span class="price-first">$24.99</span>
              <span class="price">$14.99</span>
              <br>
              <span class="fa fa-star checked"></span>
              <span class="fa fa-star checked"></span>
              <span class="fa fa-star checked"></span>
              <span class="fa fa-star"></span>
              <span class="fa fa-star"></span>
              <p>Lorem ipsum dolor sit amet..</p>
              <a href="product-page.html"><button class="add-to">Add to Cart</button></a>
        </div> 
       </li>

```

//javascript code//

```
function hover1() {
      document.getElementById("my-img1").src = "./images/AMH010301_G-5-dresslink.jpg";

    }
    function offhover1() {
      document.getElementById("my-img1").src = "./images/AMH010301_G-1-dresslink.jpg";

    }

    function hover2() {
      document.getElementById("my-img2").src = "./images/AMH010327_W-5-dresslink.jpg";

    }
    function offhover2() {
      document.getElementById("my-img2").src = "./images/AMH010327_W-1-dresslink.jpg";

    }

    function hover3() {
      document.getElementById("my-img3").src = "./images/AMH011122_W-3-dresslink.jpg";

    }
    function offhover3() {
      document.getElementById("my-img3").src = "./images/AMH011122_W-1-dresslink.jpg";

    }

    function hover4() {
      document.getElementById("my-img4").src = "./images/AMH011200_W-3-dresslink.jpg";

    }
    function offhover4() {
      document.getElementById("my-img4").src = "./images/AMH011200_W-2-dresslink.jpg"; 
}

```