How can I delay a :hover effect in CSS?

by

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

More Related Contents:

  1. How to change the cursor into a hand when a user hovers over a list item?
  2. What is the opposite of :hover (on mouse leave)?
  3. CSS transition effect makes image blurry / moves image 1px, in Chrome?
  4. Is there any way to hover over one element and affect a different element? [duplicate]
  5. Change opacity on all elements except hovered one
  6. How to use ‘hover’ in CSS
  7. CSS: Hover one element, effect for multiple elements?
  8. SVG USE element and :hover style
  9. Does css hover work on mobile devices?
  10. CSS disable hover effect
  11. How can I change a button’s color on hover?
  12. Spin or rotate an image on hover
  13. image moves on hover – chrome opacity issue
  14. CSS: styled a checkbox to look like a button, is there a hover?
  15. hover on child without hover effect on parent [duplicate]
  16. div background color, to change onhover
  17. CSS hover border makes elements adjust slightly
  18. Is it possible to change only the alpha of a rgba background colour on hover?
  19. How to display and hide a div with CSS?
  20. Hover on child should turn off hover effect on parent [duplicate]
  21. Is there an opposite CSS pseudo-class to :hover?
  22. prevent a pseudo element from triggering hover?
  23. How to apply child:hover but not parent:hover
  24. How can i make this wave effect on both bottom and top
  25. How do I use /deep/ or >>> or ::v-deep in Vue.js?
  26. Invalid CSS selector causes rule to be dropped: What is the rationale?
  27. How do nested vertical margin collapses work?
  28. How can I prevent CSS gradient banding?
  29. Check scrolling with CSS
  30. Continuous CSS rotation animation on hover, animated back to 0deg on hover out

Leave a Comment