Delay mouseout/hover with CSS3 transitions

I've got a box that changes size when being hovered. However, I would like to delay the mouseout stage, so that the box keep the new size for a few seconds, before getting the old size back.

div {
    width: 70px;
    -webkit-transition: .5s all;    
}

div:hover {
    width:130px;
}

Is this possible to do WITHOUT Javascript and only CSS3? I only have to care about supporting webkit.

Answers


div {
    width: 70px;
    -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 {
    width:130px;
    -webkit-transition-delay: 0s;
    -moz-transition-delay: 0s;
    -ms-transition-delay: 0s;
    -o-transition-delay: 0s;
    transition-delay: 0s;
}

This will trigger the mouseover state right away, but wait 5 sec till the mouseout is triggered.

Fiddle


transition can be declared as

transition: .5s all 5s

(shorthand, the first number is duration, the second number is delay) then you don't need the separate transition-delay

sorry, can't add as a comment as I don't have enough points


Need Your Help

Textbox using textmode password not showing text asp.net c#

asp.net c#-4.0 text textbox passwordbox

I have a few buttons on a web form, and when the user clicks them they will update the the textbox. This worked till I added the textmode = password. Now the textbox doesn't show the text anymore. I

Concatenating Tuple

python

Suppose I have a list: