javascript 在将鼠标悬停在按钮上时更改图像源答案

【问题标题】：javascript to change image source when hover over buttonjavascript 在将鼠标悬停在按钮上时更改图像源
【发布时间】：2021-04-01 23:32:32
【问题描述】：

这里是 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。感谢您的帮助！

【问题讨论】：

您可能已经注意到getElementsByClassName 中的s。它返回多个元素s。您可以通过添加[0] (getElementsByClassName('...')[0]) 来获得第一个，或者如果它应该是唯一的，则使用id 而不是class。在这种情况下，你可以做getElementById('...')
谢谢，有道理！但是我试过了，它仍然对我不起作用。我是否还缺少其他东西...

【解决方案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 是图片元素

【讨论】：

感谢您的回答！我都试过了，还是不行，我怕我错过了别的东西......
你确定你的 src 去对了地方
非常确定。但我现在找到了一个完全不同的选择。还是非常感谢！！
只是出于好奇，你最后做了什么
好吧，我只是改变了它的设计，本质上是计划在按钮上使用这些图像，当您将鼠标悬停在按钮上时会改变颜色（相同图像其他颜色）。现在，当您将鼠标悬停在按钮上时，按钮的背景颜色会发生变化。看起来还是很棒的！ ;)