仅 JavaScript 图像悬停答案

【问题标题】：JavaScript Only Image Hover仅 JavaScript 图像悬停
【发布时间】：2015-06-16 22:06:05
【问题描述】：

这纯粹是为了学习目的；我知道 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 应用到外部脚本会那么复杂吗？

谢谢！

【问题讨论】：

标签： javascript external onmouseover onmouseout

【解决方案1】：

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

【讨论】：

非常感谢！这是我理解的最简单和最容易的答案。我会支持你，但我还是太新了。我不完全确定为什么我的帖子被否决了；我知道这是一个愚蠢的简单问题，但我学到了一些东西，也许其他人会。

【解决方案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);

【讨论】：

非常感谢！我对此进行了测试，并且有效。它有一些我还没有学过的元素，所以现在我知道要查找它们。

【解决方案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);

【讨论】：

谢谢！我会查看文档。