gpt4 book ai didi

仅 JavaScript 图像悬停

转载 作者:行者123 更新时间:2023-12-03 09:51:12 27 4
gpt4 key购买 nike

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

谢谢!

最佳答案

差不多是这样

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

关于仅 JavaScript 图像悬停,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30879080/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com