javascript - 鼠标悬停在按钮上时更改图像源

Question

Javascript 菜鸟在这里。我已经寻找了相关的问题，但所有的结果都不适合我，或者我并不真正理解其中的一部分。所以我可能只是在这里犯了一个愚蠢的错误。

我想要做的是一个脚本，当我将鼠标悬停在按钮上时，它会更改图像的来源。

HTML：

<button onmouseover="changeImg()" class="about" href="#">ABOUT</button>
 <img class="image2" src="images/image2.png">

Javascript：

<script>
function changeImg()
{ 
var image = document.getElementsByClassName("image2");
image.src = "images/image1.png"
}
</script>

可能有更简单的方法吗？我更喜欢只使用 html css 和 javascript。 感谢您的帮助！

Answer 1

您正在使用 getElementsByClassName，它将返回具有该类的所有元素的数组。使用 document.getElementByClassName 或 document.querySelector(“element”)

function changeImg() { 
    var image = document.getElementByClassName("image2");
    image.src = "images/image1.png"
}

另一种解决方案是使用带有 e 变量的事件侦听器：

document.querySelector(“.about”).addEventListener(“mouseover”, function (e) {
    e.target.src = “newSource”
})

e.target 是图像元素