如何解决为什么鼠标移动时偏移量会在 JavaScript 中反弹到顶部？
我创建了一个鼠标移动效果，就像当您在粉红色框（它实际上是一个部分标签）中移动鼠标时，文本变得透明且具有线条感。在那个粉红色的框中，我创建了两个段落标签并将它们包裹在 div 中，如果 div 中有一个元素，效果会很好，但是如果我增加 div 中的元素数量并尝试移动我的光标在那个框中，一旦光标到达中间（或进入另一个元素），它就会突然到达顶部（意味着黄色圆圈到达顶部），另一个问题是，如果我移动鼠标按住黄色圆圈那个盒子里的速度非常快，大多数时候光标移出黄色圆圈，圆圈停止移动。
那么谁能告诉我为什么会发生这种情况以及如何解决这些问题？
这是我的代码：
let a = document.querySelector(".test")
a.addEventListener("mousemove",function(e){
a.classList.add("test1")
a.style.setProperty("--x",e.offsetX + "px")
a.style.setProperty("--y",e.offsetY + "px")
//console.log(e.offsetY)
})body {
background-color: #ccc;
text-align: center;
margin-top: 100px;
}
.bgcolor {
background-color: black;
color: rgba(255,255,0.8);
}
section{
/* width:800px;
height:250px; */
margin: 0 auto;
border: 1px solid #000;
position: relative;
}
section p{
font-size: 1em;
}
section div{
border: 1px solid #000;
position: absolute;
top: 0;
left: 0;
background: pink;
color:white;
font-size:2em;
height:450px;
}
section div:nth-child(2){
clip-path:circle(100px at 0 0 );
background: yellow;
}
.test1{
clip-path:circle(100px at var(--x) var(--y)) !important;
}
section div:nth-child(2) p{
-webkit-text-stroke:1px;
-webkit-text-stroke-color:white;
color: transparent;
}<!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>
</head>
<body>
<section>
<div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit dolores officiis laborum distinctio vitae sint illo,perspiciatis ullam sed recusandae. helllo</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus,molestias. Aliquid obcaecati sit vero optio omnis cumque. Fugiat placeat officiis quidem laborum quod ad!</p>
</div>
<div class=test>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit dolores officiis laborum distinctio vitae sint illo,perspiciatis ullam sed recusandae.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolores iste aliquam unde doloremque dignissimos ullam quis eveniet,nostrum nisi iusto,inventore nam quibusdam exercitationem.</p>
</div>
</section>
</body>
</html>版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
