如何通过剪辑路径过渡保持悬停效果？

如何解决如何通过剪辑路径过渡保持悬停效果？

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

它是两个 div 堆叠在一起，然后在悬停时应用 clip-path 来隐藏顶部 div，显示底部的那个。 CSS是这样的

.wipe_point {
  clip-path: polygon(-1% 0%,101% 0%,101% 100%,50% 200%,-1% 100%);
  transition: 0.5s ease;
}

.wipe_point:hover {
  clip-path: polygon(-1% -170%,101% -170%,101% -70%,50% 30%,-1% -70% );
}

我的问题是在剪切区域未检测到 :hover。这意味着如果鼠标并不总是在“未剪裁”区域内，动画看起来像这样：

问题：如何在剪切区域中仍然检测到悬停？ 谢谢！！

解决方法

我会使用如下的一个元素来做不同的事情：

.box {
  font-size:20px;
  font-weight:bold;
  font-family:sans-serif;
  padding:15px 30px;
  display:inline-block;
  color:transparent;
  background:
    conic-gradient(from -60deg,black 120deg,#fff  0) top/100% 400%,conic-gradient(from -60deg,#0000 120deg,blue 0) top/100% 400%;
  -webkit-background-clip:text,padding-box;
  background-clip:text,padding-box;
  transition:1s;
}
.box:hover {
  background-position:bottom;
}

<div class="box">Some Text</div>

以上在 Firefox 上不起作用，所以你可以像下面那样做

.box {
  font-size:20px;
  font-weight:bold;
  font-family:sans-serif;
  padding:15px 30px;
  display:inline-block;
  color:transparent;
  background:conic-gradient(from -60deg,#fff 0) top/100% 400%;
  -webkit-background-clip:text;
  background-clip:text;
  transition:1s;
  position:relative;
}
.box::before {
  content:"";
  position:absolute;
  z-index:-1;
  inset:0;
  background:conic-gradient(from -60deg,blue 0) top/100% 400%;
  transition:1s;
}

.box:hover,.box:hover::before{
  background-position:bottom;
}

<div class="box">Some Text</div>