用js 实现鼠标移动，移入，移出事件
用js 实现鼠标移动，移入，移出事件
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
img {
width: 500px;
height: 500px;
}
.div0 p {
position: absolute;
top: 0;
left: 0;
width: 500px;
height: 190px;
background: rgba(204, 204, 204, 0.244);
display: none;
/* text-align: center; */
/* 禁用鼠标事件 */
pointer-events: none;
}
</style>
</head>
<body>
<img src="v2-5b5d0ee1ccf96263a96d2fcb95840d24_r.jpg" alt="">
<div class="div0">
<p>派大星名言警句:<br>1.知识不能替代友谊，比起失去你，我宁愿做个白痴。<br> 2.海绵宝宝，我只想告诉你一件事情，派大星也是需要 人疼的！<br>3.我生下来就是为了与你相遇。<br>4.我要两个冰淇淋，一个给我吃一个给我的好朋友海绵宝宝。<br>5.人生就是不公平的 你慢慢习惯吧你。<br>6.你可以是一本打开的书，海绵宝宝，但我要比那复杂点儿。<br>7.虽然我满腹经纶，却无人可以分享，一个朋 友都没有。. 曾经和我一起欢笑的人是谁呢？
</p>
</div>
</body>
<script>
var img = document.querySelector("img")
var p = document.querySelector(".div0 p")
img.onmouseover = function() {
p.style.display = "block";
}
img.onmouseout = function() {
p.style.display = "none";
}
img.onmousemove = function(event) {
p.style.left = event.offsetX + "px"
p.style.top = event.offsetY + "px"
}
</script>
</html>
示例初始效果：
把鼠标放到图片上：
并且文字块会跟随鼠标移动
为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。
更多推荐
3
0- 0
已为社区贡献1条内容
所有评论(0)