仅使用JavaScript的图像悬停效果

Question

这仅用于学习目的；我知道在这种情况下，CSS将是首选方法。

我知道在JavaScript中，您可以使用内联事件处理来悬停在图像上，例如：

<img src="image.png" onMouseover="src='image2.png'" onMouseout="src='image.png'">

“我知道你可以在你的网站中安装jQuery，并执行以下代码或类似代码：

HTML:”

<img src="image.png" id="image-hover">

jQuery：

$(document).ready(function() {
        $( "#hover-example" ).mouseover(function(){
            $(this).attr("src", "image-hover.png");
        });

        $( "#hover-example" ).mouseout(function(){
            $(this).attr("src", "image.png");
        });
    });

我在想如何仅使用JavaScript生成该输出，而不是使用内联事件处理，并使用外部脚本。我已经尝试浏览了各种Stack Overflow和Google搜索结果，但大多数都是使用jQuery。将那个简单的内联JavaScript应用到外部脚本是否很复杂呢？

谢谢！

- Tania Rascia

Answer 1

var image = document.getElementById("hover-example");
image.onmouseover = function() {  image.src = "image-hover.png"; }
image.onmouseout = function() {  image.src = "image.png"; }

- Duncan Thacker

---

非常感谢！这对我来说是最简单、最容易理解的答案。我想要点赞你，但我还太新了。我不完全确定为什么我的帖子被踩了；我知道这是一个很愚蠢的简单问题，但我学到了一些东西，也许其他人会从中受益。 - Tania Rascia

Answer 2

基本上是以相同的方式。

var img = document.getElementById('image-hover');

img.addEventListener('mouseenter', function() {
    this.src = 'image-hover.png';
}, false);

img.addEventListener('mouseleave', function() {
    this.src = 'image.png';
}, false);

- adeneo

---

非常感谢！我测试了一下，它起作用了。它有一些我还没有学过的元素，所以现在我知道要查找它们了。 - Tania Rascia

Answer 3

既然您对原生JavaScript实现感兴趣，请查看mouseover事件的文档。

您可以通过以下方式实现所需结果：

var img = document.getElementById('image-hover');

img.addEventListener('mouseenter', function() {
    this.src = 'image-hover.png';
}, false);

img.addEventListener('mouseleave', function() {
    this.src = 'image.png';
}, false);

- Danny Delott

---

谢谢！我会查看文档。 - Tania Rascia