How can I delay a :hover effect in CSS?

Question

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/

Answer 1

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

Answer 2

div {
     background: #dbdbdb;
    -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 {
    background:#5AC900;
    -webkit-transition-delay: 0s;
    -moz-transition-delay: 0s;
    -ms-transition-delay: 0s;
    -o-transition-delay: 0s;
    transition-delay: 0s;
}

This will add a transition delay, which will be applicable to almost every browser..

Answer 3

For a more aesthetic appearance :) can be:

left:-9999em; 
top:-9999em; 

position for .sNv2 .nav UL can be replaced by z-index:-1 and z-index:1 for .sNv2 .nav LI:Hover UL