Adam Youngers Adam Youngers - 6 months ago 78
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.


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.


Here is the final code...

Thanks for all the help!


Well.. you can use transitions to delay the :hover effect you want, if the effect is CSS based..

For example

    transition: 0s background-color;


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

Demo of delay only on hover on at

Vendor Specific Extentions for Transitions and W3C CSS3 transitions