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