Delay mouseout/hover with CSS3 transitions
48,259
Solution 1
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.
Solution 2
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
Author by
patad
Updated on February 12, 2020Comments
-
patad over 4 years
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.
-
Michael Mullany about 12 yearsedited to add non webkit prefixes too - it's just good practice
-
Screenack about 11 yearson the "div" tag definition, isn't specifying "transition:" and "transition-delay" essentially a duplicate? The first value of the transition spec IS the delay value, no?
-
Sandwich over 9 years@Screenack No, the first value is the duration of the transition - how long it takes to complete once it gets going.
-
Mindwin over 7 yearsawesome use of transitions, patad.