鼠标悬停特效代码怎么写，鼠标放在小图片上旁边显示一张大图片？_随笔

代码有bug，修改后如下：

需要注意，拷贝下面这段代码，保存为 html后缀名的文件；需要自己在相同的目录下，放置两张图片，小图片.jpg 大图片.jpg

效果如下图：当鼠标悬停在小图片上面的时候，会显示大图片；鼠标移出，隐藏大图片。

问题：定位需要读者自己去实现一下吧，偷懒了。感谢楼上分享!

<!doctype html>

<html>

<head>

</head>

<body>

你要显示特效的html

大图片显示如下

</div>

let divHover = document.getElementById("divHover")

function hoverShowDiv() {

console.log("显示大图片")

divHover.style.display = "block"

divHover.style.top = document.getElementById("littleimg").style.top + 10

divHover.style.left = document.getElementById("littleimg").style.left + 10

}

function hoverHiddendiv() {

console.log("显示小图片")

divHover.style.display = "none"

}

</script>

</body>

</html>

实现鼠标悬停显示文字，html中使用title属性就可实现显示文字的效果，这个属性还是比较实用的，你可以参考下

<a href="#" title="这里是显示的文字">hello</a>

当鼠标悬停在 hello上一会就会有文字 "这里是显示的文字" 显示。

欢迎分享，转载请注明来源：内存溢出

鼠标悬停特效代码怎么写，鼠标放在小图片上旁边显示一张大图片？