一、首先需要div布局：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js悬停</title>
<style type="text/css">
p {
width: 200px
height: 200px
background-color: skyblue
text-align: center
line-height: 200px
}
</style>
</head>
<body>
<p id="txt">我是一个DIV</p>
<script type="text/javascript">
var txt = document.getElementById('txt')
txt.setAttribute("title","鼠标悬停了")
</script>
</body>
</html>
二、div实在的在开发工具里面的代码效果如下截图：
三、这段代码最主要的重点是如下：
<script type="text/javascript">
var txt = document.getElementById('txt')
txt.setAttribute("title","鼠标悬停了")
</script>
四、实际代码在浏览器的渲染如下：
代码有bug，修改后如下：
需要注意，拷贝下面这段代码，保存为 html后缀名的文件；需要自己在相同的目录下，放置两张图片，小图片.jpg 大图片.jpg
效果如下图：当鼠标悬停在小图片上面的时候，会显示大图片；鼠标移出，隐藏大图片。
问题：定位需要读者自己去实现一下吧，偷懒了。感谢楼上分享!
<!doctype html><html>
<head>
<meta charset=utf-8>
</head>
<body>
你要显示特效的html
<img src="小图片.jpg" width="200px" height="200px" id="littleimg" onmouseout="hoverHiddendiv()" onmouseenter="hoverShowDiv()" />
<div style="width:200pxheight:80pxborder:1px solide #aaccffdisplay:none" id="divHover" >
大图片显示如下
<img src="大图片.jpg" width="500px" height="300px" id="bigimg" />
</div>
<script type="text/javascript">
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>
