How to Delay a :Hover Effect in Css

How can I delay a :hover effect in CSS?

You can use transitions to delay the :hover effect you want, if the effect is CSS-based.

For example

div{
    transition: 0s background-color;
}

div:hover{
    background-color:red;    
    transition-delay:1s;
}

this will delay applying the the hover effects (background-color in this case) for one second.

Demo of delay on both hover on and off:

div{    display:inline-block;    padding:5px;    margin:10px;    border:1px solid #ccc;    transition: 0s background-color;    transition-delay:1s;}div:hover{    background-color:red;}

<div>delayed hover</div>

Delay hover effect for child div

You can set transition speeds & delays without a CSS animation. The transition-delay effect doesn't apply to display properties on hover. It works best with opacity: 0; → opacity: 1; or visibility: hidden; → visibility: visible; See the changes I made to your CSS.

ul {
  width: 100px;
  list-style-type: none;
}

li {
  background: red;
}

div {
  opacity: 0;
  transition: all .4s ease 3s;

}

ul:hover > div {
  background: red;
  opacity: 1;
  transition: .4s;
}

<ul>
  <li>Hover me</li>
  <div>
    Show on hover
  </div>
</ul>

CSS :hover:after Delay

You can try to put the transition on your after instead:

.test:after {  content: 'shown after 2 seconds';  opacity:0;  transition: 2s all;   }
.test:hover:after {  opacity:1;  transition-delay: 2s; }

<div class="test">  hover me for 2 seconds</div>

Css hover delay (filter)

What you need is transition-delay:

.image2 {
    -webkit-transition: all .4s ease;
    -moz-transition: all .4s ease;
    -o-transition: all .4s ease;
    transition: all .4s ease;
    -webkit-transition-delay: 3s;
    transition-delay: 3s;
}

It's quite simple, really: when a certain CSS property of an element changes, before applying the change browsers will check if there is any transition set for that particular CSS property.
If there is one, the browser will check for transition-delay. But if no transition is set, there is nothing to delay, so transition-delay is useless.

In the above example, the transition itself is set to 0.4 seconds and it will start at 3 seconds after you hover (but beware that you need to hover the element for 3 seconds, otherwise the transition gets canceled).

I added a transition-delay of 3 seconds to the classic filter example to get a feel of how it all behaves.

Add time delay to mouse hovering

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>

Delay mouseout/hover with CSS3 transitions

div {
    width: 70px;
    -webkit-transition: .5s all;   
    -webkit-transition-delay: 5s; 
    -moz-transition: .5s all;   
    -moz-transition-delay: 5s; 
    -ms-transition: .5s all;   
    -ms-transition-delay: 5s; 
    -o-transition: .5s all;   
    -o-transition-delay: 5s; 
    transition: .5s all;   
    transition-delay: 5s; 
}

div:hover {
    width:130px;
    -webkit-transition-delay: 0s;
    -moz-transition-delay: 0s;
    -ms-transition-delay: 0s;
    -o-transition-delay: 0s;
    transition-delay: 0s;
}

This will trigger the mouseover state right away, but wait 5 sec till the mouseout is triggered.

Fiddle

How do I have both :hover and transition-delay?

First of all, you need to put your transition setting on both button and button:hover, if you want different delay values on hover and mouseout.

Secondly, if you want to have a transition on a property such as width, it works better if you specify its initial value on button.

And finally, you can achieve the desired result by using the ::after pseudo-element :

Your HTML

<button>click me</button>

Your CSS

button {
  padding: 12px;
  border-radius: 50%;
  margin-bottom: 2em;
  position: relative;
  transition-delay: 0s;
  background-color: #6272a4;
  width: 100px;
}

button::after {
  content:"test";
  position: absolute;
  top:0;
  left:0;
  right: 0;
  bottom: 0;
  padding: 12px;
  border-radius: 50%;
  background-color: red;
}

button:hover::after  {
  display: none;
}

button:hover  {
  background-color: #000000;
  width: 250px;
  transition-delay: 2s;
  color: red;
}

You can add transition time and ease if you want to.

Mouse hover delay, to show a child div

display do not animation for transition. u can use opacity

.content-l1 {  transition: 0s;  opacity: 0;}
.activator:hover>.content-l1 {  opacity: 1;  transition-delay: 0.5s;}

<div class="activator">  fjhfjh  <div class="content-l1">    afsfas  </div></div>

How to delay on hover effect in react with css?

I removed the onClick, placed the setSelectedData in the onMouseEnter, added a setTimeout in there, and put your setHover in the timeout. I don't particularly like using setTimeouts, but this was a quick way to do what you were looking for.

<Col
    xs={6}
    className="img-wrap"
    onMouseEnter={() => {
       setSelectedData(post);
       setTimeout(() => {
           setHover(true);
       }, 1000);
    }}
    onMouseLeave={() => setHover(false)}
 >

In the css we need to lose the :hover psuedo selector, and add a class:

.img-wrap .overlay.fade {
  opacity: 0;
}

Then on the overlay we need to make the fade class conditional:

<div className={"overlay" + (hover && post === selectedData ? " fade" : "")}>

https://codesandbox.io/s/quizzical-mayer-0si2d?file=/src/App.js:506-731