Adam Youngers Adam Youngers - 1 year ago 134
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!

Answer Source

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

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download