How do I make separate hover functions work in javascript?

Question

I'm trying to make an image {image 7} appear when hovering over {image 5} while also making {image 8} appear when hovering over {image 6}. It seems to work fine when using the hovering only once, but when I try to do it twice (make different images appear when hovering on different images), it doesn't work. I think that it is because i don't know how to call each set of images on script properly. I'm pretty new at this so any help would be super appreciated. Thank you in advaced!

p.s. I will use the hover event for diferent elements several times in my webpage, not just twice.

here is my html:

<div class="row1">

<div>
<div class="hover-title">

<a rel="history" href="enlightened-type" class="image-link" id="what" onmouseover="showImg()" onmouseout="hideImg()">{image 5 scale="19"}</a>

</div>

<div class="hover-image">
<div id="what1" style="visibility: hidden;"> {image 7 scale="27"} </div>
</div>

</div>

<div>

<div class="hover-title">
<a rel="history" href="enlightened-type" class="image-link" id="young" onmouseover="showImg()" onmouseout="hideImg()">{image 6 scale="16"}</a>
</div>

<div class="hover-image">
<div id="young1" style="visibility: hidden;">{image 8 scale="12"} </div>
</div>

</div>

& this is my script:

<script>

    var hoverImg = 
        document.getElementById("what1");
        document.getElementById("young1");

    function showImg(x) {
      hoverImg.style.visibility = "visible";
    }

    function hideImg(x) {
      hoverImg.style.visibility = "hidden";
    }
  
 
</script>