Javascript 剪辑路径动画（CSS/JS）的鼠标指针问题

我更新了我的帖子，因为从上周开始我就想出了一些解决方案

---

剪辑路径部分有问题

我希望我的剪辑路径（圆）收缩，然后在鼠标离开剪辑部分时消失，并在鼠标进入剪辑部分时再次展开

收缩正在工作，但扩展不起作用（参见下面的代码）

欢迎大家帮忙

提前谢谢你，祝你度过愉快的一天

const circleClip=document.querySelector（“#hidden”）；
让divSize=document.querySelector（“#top”）.offsetHeight；
函数removeIntro（）{
circleClip.classList.remove（'intro'）；
}
函数循环移动（e）{
removeIntro（）；
circleClip.style.setProperty（'--x'，e.clientX+'px'）；
circleClip.style.setProperty（'-y'，e.clientY-divSize+'px'）；
}
circleClip.addEventListener（'mouseleave'，function（）{
circleClip.classList.toggle（'shrink'）；
});
/*这个在桌面上不起作用*/
circleClip.addEventListener（'mouseenter'，function（）{
circleClip.classList.toggle（'seen'）；
});
circleClip.addEventListener（'mousemove'，circleMove）；
circleClip.addEventListener（'touchmove'，（e）=>{
removeIntro（）；
让touch=e.touch[0]；
e、 预防默认值（）；
circleClip.style.setProperty（'--x'，touch.clientX+'px'）；
circleClip.style.setProperty（'-y'，touch.clientY-divSize+'px'）；
});
/*这个在手机上不起作用*/
circleClip.addEventListener（'touchstart'，function（）{
circleClip.classList.toggle（'seen'）；
});
circleClip.addEventListener（'touchend'，function（）{
circleClip.classList.toggle（'shrink'）；
});
正文{
位置：相对位置；
保证金：0；
溢出：隐藏；
}
h1，
h2，
p{
保证金：0；
填充：0；
}
#顶{
颜色：白色；
背景：蓝色；
字体大小：30px；
文本对齐：居中；
}
#隐p{
填充：10%；
字体系列：无衬线；
}
#隐藏的{
字体大小：7vh！重要；
线高：1米；
背景：红色；
最小高度：100vh；
剪辑路径：圆形（变量（--x）变量（--y）时为10%）；
光标：无；
}
#隐藏。介绍{
剪辑路径：圆形（0%在50%50%）；
动画：circleIntro 1800ms三次贝塞尔（0.645,0.045,0.355,1）都有；
}
@关键帧circleIntro{
100% {
剪辑路径：圆形（50%50%时为10%）；
}
}
.收缩{
剪辑路径：圆形（50%50%时为10%）；
动画：收缩800毫秒三次贝塞尔（0.645,0.045,0.355,1）两者；
}
@关键帧收缩{
100% {
剪辑路径：圆形（0%在50%50%）；
}
}
.出现{
剪辑路径：圆形（0%在50%50%）；
动画：显示800ms立方贝塞尔（0645,0.045,0.355,1）二者；
}
@出现关键帧{
100% {
剪辑路径：圆形（50%50%时为10%）；
}
}
这是另一个div
对于所有人都存在的错误，我们必须清楚地认识到这一点，因为我们必须清楚地认识到，所有人都应该受到赞扬、尊重和尊重，因为我们必须清楚地认识到发明家的真实性和准建筑学

你好像在找这样的东西

您可以将事件处理程序分离为各自的函数：

function showCircle(e) {
    $(".clip").css({
        "-webkit-clip-path": "circle(0px at var(--x, 0) var(--y, 0))"
    });
}

function hideCircle(e) {
    $(".clip").css({
        "-webkit-clip-path": "circle(0px at var(--x, 0) var(--y, 0))"
    });
}

function moveCircle(e) {
    $(".clip").css ({
        '--x': e.pageX,
        '--y': e.pageY - $("#previoussection").height() - $("#clip_section").height()
    });
}

然后注册鼠标交互的处理程序

$(document).mousemove(moveCircle);
$(".clip_container").mouseleave(hideCircle);
$(".clip_container").mouseenter(showCircle);

和触摸互动

$(document).touchmove(moveCircle);
$(".clip_container").touchstart(hideCircle);
$(".clip_container").touchend(showCircle);

圆没有缩小，因为它的CSS永远不会更改回半径为0的圆

我认为这里的关键是确保您将“clip path”CSS属性更改为完整值，该值表示您希望在触发相关事件时看到的圆

还值得注意的是，您的
mousestotped
函数从未在代码中被调用。
当您说“走出文本区域”时，您指的是哪个区域？此外，为了实现基于触摸的设备兼容性，您可能还需要收听
touchmove
事件。我的意思是，网页将有几个div，只有当光标位于.main text或.clip_container div上时，clip部分才应处于活动状态。当光标离开此容器时，夹子应收缩直至消失。这清楚吗？谢谢你的回答和解释。这很有帮助，但对mouseenter不起作用，我不明白为什么。我希望圆圈在离开文本时缩小，在进入文本时增大。如果我不够清楚，我很抱歉。我已将您的代码和此代码添加到我当前的jquery代码中$（“.clip”）.mouseenter（函数（e）{$（“.clip”）.css（{“-webkit clip path:“在var（--x，0）var（--y，0））”处的圆（2.5em）；}）；这就是你解释的还是我遗漏了什么？对于mouseenter事件，你设置了合适的半径了吗？它应该是2.5em，而不是0px。因此，整个CSS规则，作为一个对象传递到jQuery CSS函数中，就像
{“-webkit clip path”：“circle（2.5em at var（-x，0）var（-y，0））”}
是的，我将半径设置为2.5em这是我的错，我使用了错误的元素来绑定事件。我正在用我拥有的完整JS更新答案。现在它运行良好！非常感谢你。“mousestopped”函数确实在以前的版本中使用过。我把它删掉了。在我结束这篇文章之前，我会在手机上测试完整的代码，但是你回答了我的第一个问题，非常感谢！