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应用于外部脚本会不会很复杂？

谢谢！

Answer 1

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

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);

Answer 3

由于您对vanilla JavaScript实现感兴趣，请查看mouseover事件的文档。

你可以通过这样的方式达到预期的效果：

UIViewController

仅JavaScript图像悬停

3 个答案: