CSS effect for hover off

user_15637705 0
Viewed 85

I am working on animation in React app. I need animation starts working after hover off. I tried :hover:after css but does not work. Animation can work after hover over the image but I need to start after hover off. After hover over the image the colour of image can be changed and button can be appeared that is good but after hover off, animation should start working and button starts moving down that does not work. how can I do that ?

       //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>
                );
        
            };
reactjs css
1 Answers

React provide its own event system call SyntheticEvent

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

To listen mouse event you can find the listed mouse event in their docs here. In your case we can use onMouseLeave event and change elements style by adding or removing class from the classList of target element.

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

You can checkout working example here.

Or you can use framer-motion

user_97516970
Related