Estoy tratando de hacer que aparezca una imagen {imagen 7} al pasar el cursor sobre la {imagen 5} y al mismo tiempo hacer que aparezca {imagen 8} al pasar el cursor sobre la {imagen 6}. Parece funcionar bien cuando uso el desplazamiento solo una vez, pero cuando trato de hacerlo dos veces (hacer que aparezcan diferentes imágenes al pasar el mouse sobre diferentes imágenes), no funciona. Creo que es porque no sé cómo llamar correctamente a cada conjunto de imágenes en el script. Soy bastante nuevo en esto, así que cualquier ayuda sería muy apreciada. ¡Gracias por adelantado!

PD: Usaré el evento de desplazamiento para diferentes elementos varias veces en mi página web, no solo dos veces.

aquí está mi 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>

& este es mi guion:

 <script> var hoverImg = document.getElementById("what1"); document.getElementById("young1"); function showImg(x) { hoverImg.style.visibility = "visible"; } function hideImg(x) { hoverImg.style.visibility = "hidden"; } </script>