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