如何定位 Javascript 中的 div 容器？

Question

我创建了一个非常简单的 javascript 行来更改 hover 上的图像， https://designordering.com/wink/但是，我想在整个容器上制作这个 hover 效果，而不是仅在具有图像和“打个招呼”文本。 这实际上现在有效，因为我将它直接添加到 HTML 标签上。

    <div class="sayHi" onhover="contact" onmouseover="document.getElementById('myImage').src='./img/face-wink.png'" onmouseout="document.getElementById('myImage').src='./img/face.png'">
        <span style="font-size:1.5rem; font-family:Roboto, sans-serif; font-weight:600; padding-right: 15px;">Say Hi</span>
        <img class="face" id="myImage" src="./img/face.png" alt="face" height="80px">
    </div>

但是，我想将此脚本移动到外部 JS 文件，但我很难找到解决方案。 你能帮我吗？

我正在尝试定位容器 div 而不是图像标签。 或者找到解决方案如何将其移动到外部 JS 文件

 onmouseover="document.getElementById('myImage').src='./img/face-wink.png'" onmouseout="document.getElementById('myImage').src='./img/face.png'"

Answer 1

您可以通过引用 javascript 代码中的 div 元素来执行此操作

const sayHiDiv = document.querySelector(".sayHi");
const myImage = document.getElementById("myImage");
sayHiDiv.addEventListener("mouseover", e => myImage.src = "./img/face-wink.png");
sayHiDiv.addEventListener("mouseout", e => myImage.src = "./img/face.png");

编辑

如果需要更模块化的方法（如果您无法访问 javascript 中的元素），那么您可以定义一个 function

function changeImage (div, src)
{
    div.querySelector("img").src = src;
}

然后可以使用 function 简化 HTML

<div class="sayHi" onmouseover="changeImage(this, '.img/face-wink.png');" onmouseout="changeImage(this, '.img/face.png');" >
    <!-- span and img -->
</div>