时间戳

首页 > 解决方案 > 为什么鼠标在 JavaScript 中会随着偏移量反弹到顶部？

javascript - 为什么鼠标在 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, 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>

标签： javascripthtmlcss

解决方案

推荐阅读