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:

<div>
    <div>
        <ul>
            <li><a href="#">
                <ul>
                    <li></li>
                    <li></li>
                </ul>
            </li>
            <li>
            <li>
        </ul>
    </div>
</div>

Here is the full demo: http://jsfiddle.net/aEgV3/

Interesting question, but I think 'no; not without JavaScript' is likely to be the answer, unfortunately. — David Thomas, Dec 19 '11 at 19:05

score 204 · Accepted Answer · edited Jun 06 '19 at 13:20

204

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

edited Jun 06 '19 at 13:20

TylerH

20,799
66
75
101

answered Dec 19 '11 at 19:12

Gabriele Petrioli

191,379
34
261
317

I updated my question... I'm not sure if a transition would work in my case or not. I have sub menus positioned of screen and being put back in place on hover. – Adam Youngers Dec 19 '11 at 23:43
12

But how to set time for in and out. Like when user keep mouse on div for 1sec... then transition occurs. But when move out.. then immediately transition goes out.. – Uday Hiwarale Jan 15 '14 at 10:50
1

The property to handle the transition duration is a different one. You can manipulate them distinctly to achieve the effect you want, example: http://dabblet.com/gist/332903040f1f07754d1f – Gabriele Petrioli Mar 01 '16 at 09:49
@VictoriaStuart depends on how you show/hide it. If it is with `display` property no, but if you move it off screen then yes. – Gabriele Petrioli Oct 09 '16 at 10:18
The duration will take effect on :active too. You need to reset the delay to 0s on :active in order to avoid waiting before any :active transition takes effect. – John Ohara Jul 28 '18 at 12:58
I am trying to delay the rotate transform on hover effect slow a bit. But its not slow. Whats wrong I am doing here ? Below is the css code .eael-offcanvas-toggle{ transition: rotate 500ms; } .eael-offcanvas-toggle::after{content: "///"; color: #322625; font-size: 30px;} .eael-offcanvas-toggle:hover::after{color: #c1252b; transition: 0.1s ease-in !important; content: "|||"; transform: rotate(-0deg);} .eael-offcanvas-toggle::before{} – Md. Amanur Rahman May 21 '23 at 10:36
@Md.AmanurRahman you cannot rotate the change of content. You can use the same three lines though and [`skew`](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/skew) them. Something like https://jsfiddle.net/gaby/1vrxfmhz/5/ – Gabriele Petrioli May 21 '23 at 10:44

score 16 · Answer 2 · answered Sep 28 '16 at 06:03

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..

score -6 · Answer 3 · edited Mar 20 '14 at 13:57

-6

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

edited Mar 20 '14 at 13:57

Amber

812
8
21

answered Mar 20 '14 at 13:34

Колян Чернышов

1

How can I delay a :hover effect in CSS?

3 Answers3

Linked

Related