How can I delay a :hover effect in CSS?

css, delay, hover

Solution

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>

Demo of delay only on hover on:

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

<div>delayed hover</div>

Vendor Specific Extentions for Transitions and W3C CSS3 transitions

Problem

Is there a way to delay the :Hover event without using JavaScript? I know there is a way to delay animations, but I haven't seen anything on delaying the :hover event. I'm building a son-of-suckerfish like menu. I'd like to simulate what hoverIntent does without adding the extra JS weight. I'd prefer to treat this as a progressive enhancement and not make JS a requirement for using the menu. Example of menu markup: ``` <div> <div> <ul> <li><a href="#"> <ul> <li></li> <li></li> </ul> </li> <li> <li> </ul> </div> </div> ``` Here is the full demo: http://jsfiddle.net/aEgV3/

Original source