Question

鼠标移入移出显示不同图片 javascript javascript实现？

鼠标移入移出显示不同图片
在页面中有一张原始图片，鼠标移入的时候显示另一张图片，鼠标移出的时候又显示原始的那张图片，求完整代码。

Answer 1

纯css实现方式：

<style>

#test {width:400px; height:300px; background:url(图片1) no-repeat center / cover}

#test:hover {background-image:url(图片2)}

</style>

<div id=test></div>

js实现方式：

<img id=test src="图片1" />

<script>

test.onmouseover=()=>this.src="图片2";

test.onmouseout=()=>this.src="图片1";

</script>

Answer 2

先上图

企点页演示图片

再上代码

<img width="150" src="qidianye_com_1.jpg" />

<script>

var img = document.getElementsByTagName('img')[0];

img.onmouseenter = function(){

img.src = 'qidianye_com_2.jpg';

}

img.onmouseleave = function(){

img.src = 'qidianye_com_1.jpg';

}

</script>