CSS effect for hover off

Question

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

i think you need js for this check mouseout event developer.mozilla.org/en-US/docs/Web/API/Element/mouseout_event — rand_program
– rand_program, Commented May 2, 2022 at 0:39

nart · Accepted Answer · 2022-05-02 03:46:58Z

2

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

edited May 2, 2022 at 3:46

answered May 2, 2022 at 3:23

nart

1,8782 gold badges15 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Sanaz Dehghan Over a year ago

that was helpful, thanks. I used framer-motion to fix it.

Collectives™ on Stack Overflow

CSS effect for hover off

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related