问题描述
我创建了一个鼠标移动效果,就像当您在粉红色框(它实际上是一个部分标签)中移动鼠标时,文本变得透明且具有线条感。在那个粉红色的框中,我创建了两个段落标签并将它们包裹在 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 (将#修改为@)