用js 实现鼠标移动，移入，移出事件_js鼠标移入移出切换事件-CSDN博客

本文链接：https://blog.csdn.net/weixin_71439860/article/details/126231098

示例代码：

<!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>