Adam Youngers Adam Youngers - 2 months ago 19
CSS Question

Delay :Hover in CSS3?

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.

Edited...

Sorry, I should have included this to begin with... 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.

Updated

Here is the final code... http://jsfiddle.net/aEgV3/

Thanks for all the help!

Answer

Well.. 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 at http://dabblet.com/gist/1498443

Demo of delay only on hover on at http://dabblet.com/gist/1498446


Vendor Specific Extentions for Transitions and W3C CSS3 transitions