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

Question

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

这是两个divs 堆叠在一起，然后在悬停时应用clip-path 来隐藏顶部的div，显示底部的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。这意味着如果鼠标并不总是在“未剪辑”区域内，则动画如下所示：

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

Answer 1

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

.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,black 120deg,#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,#0000 120deg,blue 0) top/100% 400%;
  transition:1s;
}

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

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