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

Question

I have an button animation on hover that looks like this:

It is two div s stacked on top of each other, then on hover a clip-path is applied to hide the top div, showing the one on the bottom. The CSS is this

.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% );
}

My problem is that the :hover is not detected on the clipped area. Meaning that if the mouse is not always within the "un-clipped" area the animation looks like this:

Question: How do I get the hover to still be detected in the clipped area? Thanks!!

Answer 1

I would do it differently using one element like below:

 .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>

The above will not work on Firefox so you can do like below

 .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>