How Can I Delay :hover Effects in CSS Without JavaScript?

Delaying :hover Effects in CSS

Can you delay a :hover event without using JavaScript?

It's possible to delay the application of hover effects in CSS by utilizing transitions.

How to delay a :hover effect using transitions:

Consider the following CSS code:

div {
    transition: 0s background-color;
}

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

In this example, the transition-delay property is set to 1 second. This causes the background-color change to be delayed by 1 second when the :hover state is entered.

Example:

<div>delayed hover</div>

Visual demonstration:

<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">display:inline-block;
padding:5px;
margin:10px;
border:1px solid #ccc;
transition: 0s background-color;
transition-delay:1s;

background-color: red;