El instructor muestra para el metodo "hover" una transicion, pero cuando el mouse "sale" del boton, quisiera la misma transicion, pero inversa. Existe un "hover out", "no hover", lostfocus?
El instructor muestra para el metodo "hover" una transicion, pero cuando el mouse "sale" del boton, quisiera la misma transicion, pero inversa. Existe un "hover out", "no hover", lostfocus?
Holá Cirigliano, cómo estás?
El :hover
por sí solo tiene su efecto cuando el cursor se coloca sobre el objeto (puede ser un botón por ejemplo) y como se ve en el curso, puede cambiar el color
, border-radius
, background color
y otros elementos del objeto.
Ahora para agregar un efecto diferente cuando se quita el mouse de encima del objeto, debes hacer uso de Java Script, que no es abordado en el curso HTML5 y CSS3.
Encontré en la web una página en inglés que muestra algo parecido con el efecto que usted preguntó, pero se hace uso de JS y los pseudo elementos de CSS3 ::before
y ::after
Different transitions for hover on / hover off
Espero haberte ayudado =)
Saludos.
Thiago, encontre otra manera de obtener el resultado, sin JS. Las opciones de transition, tambien sirven en la clase en si misma, sin acciones. Entonces, el .okbutton:hover activa una transition, al salir de alli, el estado "normal" de la clase, activa la transition de regreso.
.okbutton {
width: 40%;
padding: 15px 0px;
font-size: 18px;
font-weight: bold;
color: white;
background: #0f6d65;
border: none;
border-radius: 10px;
margin: 10px;
transition: 0.5s all;
}
.okbutton:hover {
background: orange;
transition: 0.5s all;
cursor: pointer;
transform: scale(1.05);
}
Como ha comentado funciona mismo, pero pensé que querías un efecto diferente en el "hover off", como por ejemplo el botón girar 360º y volver a la posición original cuando sacar el mouse de encima de él y para eso creo que no es posible hacer sin JS.