0

I created this simple html and CSS to show a hidden div on mouse hover over a button. Now I want add 2S delay to that hidden div after its display status change to Display block and before return to its original state which is display none on mouse out. Thanks. Here is my code,

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        .content{
            display: none;
        }
        .btn:hover + .content{
            display: block;
        }
    </style>
</head>
<body>
    <div>
        <button type="button" class="btn">Hover Me</button>
        <div class="content">
            <h1>Hello</h1>
        </div>
    </div>
</body>
</html>
chamara nishantha
  • 23
  • 1
  • 6
  • Can you check [this](https://stackoverflow.com/questions/8566090/how-can-i-delay-a-hover-effect-in-css) solution and see if it helps ? – Akhil May 29 '21 at 07:44

2 Answers2

1

Use opacity and transition-duration :

use opacity to hide the division

and use transition-duration to set transition of 2 seconds

here is example: (RUN SNIPPET CODE)

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        .content{
            background-color: #4CAF50; /* Green */
            border: none;
            color: white;
            height: 90px;
            width: 90px;
            opacity: 0;
            transition-duration: 2s;
            }
        .btn:hover + .content{
            opacity: 1;
        }
    </style>
</head>
<body>
        <button type="button" class="btn">Hover Me</button>
        <div class="content">
            
        </div>
</body>
</html>
Àlok Şhukla
  • 144
  • 10
0

How can I delay a :hover effect in CSS?

The attribute you are looking for is transition and transition-delay.

div{
transition: 0s background-color;
}

div:hover{
    background-color:red;    
    transition-delay:1s;
}
Attitude12136
  • 47
  • 2
  • 9