如何在 javascript 中使用单独的悬停功能？

Question

我试图在将鼠标悬停在{image 5} 上时显示图像{image 7}，同时在将鼠标悬停在{image 6} 上时显示{image 8}。仅使用一次悬停时似乎工作正常，但当我尝试执行两次时（将鼠标悬停在不同图像上时出现不同图像），它不起作用。我认为这是因为我不知道如何正确调用脚本上的每组图像。我对此很陌生，因此非常感谢您的帮助。谢谢你的进步！

p.s。我将在我的网页中多次使用不同元素的悬停事件，而不仅仅是两次。

这是我的 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>

&这是我的脚本：

<script>

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

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

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

Answer 1

我认为你应该将发送者添加到事件处理程序并编辑相关元素

在 html 你应该这样做

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

而在 Js

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

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

如何在 javascript 中使用单独的悬停功能？

How do I make separate hover functions work in javascript?

javascript

html

hover