Html 如何使用剪辑路径变换保持悬停效果？

我有一个悬停按钮动画，如下所示：

两个

div

s堆叠在一起，然后悬停时应用

clip path

隐藏顶部div，显示底部的div。CSS是这样的

。擦拭点{
剪辑路径：多边形（-1%0%、101%0%、101%100%、50%200%、-1%100%）；
过渡：0.5s缓解；
}
.擦拭点：悬停{
剪辑路径：多边形（-1%-170%、101%-170%、101%-70%、50%30%、-1%-70%）；
}

我的问题是剪裁区域上未检测到

：hover

。这意味着，如果鼠标不总是在“未剪裁”区域内，则动画如下所示：

问题：如何使悬停仍能在剪裁区域被检测到？

---

谢谢

我会使用下面这样的元素来做不同的事情：

.box{
字体大小：20px；
字体大小：粗体；
字体系列：无衬线；
填充：15px 30px；
显示：内联块；
颜色：透明；
背景：
圆锥梯度（从-60度，黑色120度，#fff 0）顶部/100%400%，
圆锥形梯度（从-60度开始，#0000 120度，蓝色0）顶部/100%400%；
-webkit背景剪辑：文本，填充框；
背景剪辑：文本，填充框；
过渡：1s；
}
.box:悬停{
背景位置：底部；
}

---

某些文本

将鼠标悬停应用于父项element@TemaniAfif，如果我这样做了，那么整个元素会被剪裁，移除背景，然后断开的反弹继续，我误解了什么？我的意思是只有悬停事件，而不是剪辑路径（共享您的代码，以便我们可以给您答案）