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

Question

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

它是两个 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。这意味着如果鼠标不总是在“未剪辑”区域内，则动画看起来像这样：

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

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>

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

How do I keep hover effects with a clip-path transition?

html

css

animation

hover

clip-path