How to delay the disappearance of an element on mouseout

Question

I got a li element on my page which is <li class="basket last items">. If the user hovers over that li another div is shown which is <div class="articles">. I want to delay the disappearance of the div on mouseout.

My current css rules:

#headlinks li.basket div.articles {
    padding:5px;
    width:380px;
    z-index:100;
    position:absolute;
    border:1px solid #405ade;
    -webkit-transition: display .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; 
}
#headlinks li.basket:hover div.articles {
    z-index:1000;
    display:block;
    background-color:#fff;
    -webkit-transition-delay: 0s;
    -moz-transition-delay: 0s;
    -ms-transition-delay: 0s;
    -o-transition-delay: 0s;
    -transition-delay: 0s;
}

I thought with that rules the mouseout should be delayed by 5 seconds but it's not working.

Edit: Here is a jsfiddle of my problem http://jsfiddle.net/21tn6bq6/ I left out unnecessary css but basically that's my problem. I want the div to stay for some more seconds after mouseout.

possible duplicate of [Delay mouseout/hover with CSS3 transitions](http://stackoverflow.com/questions/9393125/delay-mouseout-hover-with-css3-transitions) — isherwood, Jun 08 '15 at 15:01
I read that post but as you can see I tried to use it and it's not working. That's why I need help. — Evo_x, Jun 08 '15 at 15:02
You may need to create a demo (here in a snippet or at http://jsfiddle.net). "It's not working" doesn't help much. — isherwood, Jun 08 '15 at 15:05
You cant transition non-numeric values like `block` and `none`. What would thew mid-point of the transition look like for example. There isn't a `display: half-block-half-none` property — Turnip, Jun 08 '15 at 15:24

score 0 · Answer 1 · answered Jun 08 '15 at 15:10

0

I think you have your delays switched. Your current CSS shows a delay on mouseover, not mouseout

answered Jun 08 '15 at 15:10

Khan

2,912
3
21
21

I got 0 delay on the :hover action because I want to delay the mouseout not the hover, I thought it should work that way. – Evo_x Jun 08 '15 at 15:14

score 0 · Accepted Answer · answered Jun 08 '15 at 15:33

The display property is not "animable", the transitions don't work with it. You need to change it to opacity or something else. And also you need to swap the transitions properties to get the effect that you want.

FIDDLE: https://jsfiddle.net/21tn6bq6/4/

How to delay the disappearance of an element on mouseout

2 Answers2