悬停关闭的 CSS 效果

Question

我正在 React 应用程序中处理动画。我需要动画在悬停 后开始工作。我尝试了 :hover:after css 但不起作用。将鼠标悬停在图像上后动画可以工作，但我需要在悬停后开始。将鼠标悬停在图像上后，可以更改图像的颜色并且可以出现按钮，这很好，但是悬停后，动画应该开始工作并且按钮开始向下移动但不起作用。我该怎么做？

       //animation
            **@keyframes rotate-before {
                0%   { right:0px; top:0px;}
              25%  { right:40px; top:0px;}
              50%  {bottom:10px; top:178px;right:40px;}
              }**
     
        
          
        
            .content {
              position: absolute;
              inset: 30px;
              z-index: 3;
              display: flex;
              flex-direction:column;
              align-items: center;
              justify-content: center; 
            }




    
            **.content:hover .button{
              padding: .8rem .1rem;
              background-color: #00092C;
              border:none;
              border-radius: 50%;
              cursor: pointer;
              color: #fff;
              visibility:visible;
              position: relative;  
            }**
        


        
        // this part does not work.
            .content:hover::after .button{
                padding: .8rem .1rem;
                background-color: #00092C;
                border:none;
                border-radius: 50%;
                cursor: pointer;
                color: #fff;
                visibility:visible;
                position: relative;
                 animation: rotate-before 5s linear infinite;    
              }
        


        
            .content .button{
                padding: .8rem .1rem;
                background-color: #00092C;
                border:none;
                border-radius: 50%;
                cursor: pointer;
                color: #fff;
               position: relative;
               visibility:hidden;
               transition: 0.04;
              }



        
            .content img {
              position: absolute;
              width: 100%;
              height:100%;
              object-fit: cover; 
            }



            .box:hover .content img {
              opacity: 0.3;
            }



            .box:hover .content {
              background-color: #fff;  
            }
        
        

        
            const anm = () => {
        
                return(
                    <div className={classes.flex}>
                        <div className={classes.box}>
                        <div class={classes.content}>
                        <img src="https://budgetreno.ca/wp-content/uploads/Pylon-25_compressed-thegem-portfolio-metro.jpg" alt=""/>
                        <button className={classes.button}>Follow</button>
                        </div>
                        </div>
                    </div>
                );
        
            };
        
           
        
           

Answer 1

React 提供自己的事件系统调用 SyntheticEvent

A synthetic event is a cross-browser wrapper around the browser's native event

要监听鼠标事件，您可以在他们的文档中找到列出的鼠标事件 here .在您的情况下，我们可以使用 onMouseLeave 事件并通过在目标元素的 classList 中添加或删除类来更改元素样式。

// manipulate element style
const doSomething = (e) => {
  e.target.classList.add('blue');
  buttonRef.current.classList.add('show');
};

// listen to mouse leave event
<div className="square" onMouseLeave={doSomething}>
  hover me
</div>
<button ref={buttonRef} className="hidden">
  button
</button>

您可以结帐working example在这里。

或者您可以使用 framer-motion