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    lt div gt       lt div gt           lt ul gt               lt li gt  lt a href     gt                   lt ul gt                       lt li gt  lt  li gt                       lt li gt  lt  li gt                   lt  ul gt               lt  li gt               lt li gt               lt li gt           lt  ul gt       lt  div gt   lt  div gt    Here is the full demo  http   jsfiddle net aEgV3

User · Accepted Answer

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    x000D   x000D  div  x000D      display inline-block  x000D      padding 5px  x000D      margin 10px  x000D      border 1px solid  ccc  x000D      transition  0s background-color  x000D      transition-delay 1s  x000D    x000D  div hover  x000D      background-color red  x000D    x000D   lt div gt delayed hover lt  div gt  x000D   x000D   x000D    Demo of delay only on hover on    x000D   x000D  div  x000D      display inline-block  x000D      padding 5px  x000D      margin 10px  x000D      border 1px solid  ccc  x000D      transition  0s background-color  x000D    x000D  div hover  x000D      background-color red      x000D      transition-delay 1s  x000D    x000D   lt div gt delayed hover lt  div gt  x000D   x000D   x000D      Vendor Specific Extentions for Transitions and W3C CSS3 transitions

User · Answer

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

User · Answer

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

[css] How can I delay a :hover effect in CSS?

Examples related to css

Examples related to hover

Examples related to delay