How do I make separate hover functions work in javascript?-CodePudding

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 >

<div>
<div >

<a rel="history" href="enlightened-type"  id="what" onm ouseover="showImg()" onm ouseout="hideImg()">{image 5 scale="19"}</a>

</div>

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

</div>

<div>

<div >
<a rel="history" href="enlightened-type"  id="young" onm ouseover="showImg()" onm ouseout="hideImg()">{image 6 scale="16"}</a>
</div>

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

CodePudding user response：

I think you should add the sender to the event handler and edit the related element

In html you should do this

<a rel="history" href="enlightened-type"  id="what" onm ouseover="showImg(this)" onm ouseout="hideImg(this)">{image 5 scale="19"}</a>

And in Js

function showImg(x) {
  document.getElementById(x.id   "1").style.visibility = "visible";
}

function hideImg(x) {
  document.getElementById(x.id   "1").style.visibility = "hidden";
}