¿Cómo puedo retrasar un efecto: hover en CSS?

Solución:

Puede utilizar transiciones para retrasar la :hover efecto que desee, si el efecto está basado en CSS.

Por ejemplo

div{
    transition: 0s background-color;
}

div:hover{
    background-color:red;    
    transition-delay:1s;
}

esto retrasará la aplicación de los efectos de desplazamiento (background-color en este caso) durante un segundo.

---

Demostración de la demora tanto en el encendido como en el apagado:

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>

Demostración de retraso solo al pasar el mouse sobre:

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>

---

Extensiones específicas del proveedor para transiciones y transiciones W3C CSS3

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;
}

Esto agregará un retraso de transición, que será aplicable a casi todos los navegadores.

---

---

Utiliza Nuestro Buscador