Entrar ¿Aún no tienes acceso?
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Solucionado (ver solución)
Solucionado
(ver solución)
4
respuestas

Duda con transition

Referente al curso HTML5 y CSS3 parte 3: Trabajando con formularios y tablas, en el capítulo CSS avanzado y actividad Qué son las transiciones

por Sergio José Parigansky
| 20.2k xp | 8 posts

Hola ¿Cuál es la razón de incluir transition en la clase enviar y no en el hover? El siguiente fue el código que se usó:

.enviar{
    width: 40%;
    padding: 15px 0;
    font-size: 18px;
    font-weight: bold;
    color: white;
    background: orange;
    border: none;
    border-radius: 5px;
    transition: 1s background;
}

.enviar:hover{
    background: red;
}

Pero yo lo escribí de la siguiente manera:

.enviar{
    width: 40%;
    padding: 15px 0;
    font-size: 18px;
    font-weight: bold;
    color: white;
    background: orange;
    border: none;
    border-radius: 5px;
}

.enviar:hover{
    background: red;
    transition: 1s;
}

Y funciona perfecto, incluso no hace falta alcarar que el cambio sea en el background. ¿Cuál es más conveniente y por qué? Saludos!

4 respuestas
solución!
por Maria Fernanda
| 544.6k xp | 1772 posts
Instructor

Hola Sergio, espero que esté bien.

Tu pregunta es muy relevante, gracias por tu aporte.

Realmente parece que no hay diferencia entre dejar un lugar u otro, pero de hecho la hay.

  • Cuando coloca el transform 1s en la clase .enviar{}, él tendrá un comportamiento de 1 segundo para ajustarse, tanto cuando pasa el mouse sobre el botón como cuando quita el mouse del botón;

  • Ya cuando coloca el transform 1s en la clase .enviar:hover{}, él tendrá este comportamiento de tomar 1 segundo solo cuando pasa el mouse sobre el botón. Cuando se quita el mouse, instantáneamente volverá a su tamaño original.

Pruébelo, vuelva a colocarlo en .enviar{} y vea lo que sucede cuando quita el mouse, y luego haga lo mismo colocándolo en.enviar:hover{}. Para facilitar la visualización, recomiendo usar más tiempo en la transformación: 3 segundos, por ejemplo.

Espero que hayas entendido. Si tienes alguna duda, quedaré atenta a tus comentarios, para ayudarte =)

Si este post te ayudó, por favor, marca como solucionado ✓. Continúa con tus estudios
por Ingrid Silva
| 1729.2k xp | 5577 posts
Instructor

Hola Sergio , espero que esté bien.

Gracias por tu aporte, es bueno ver los diferentes puntos de vistas, eso enriquece nuestros conocimientos.

Pero hay que tener cuidado con los cambios de background , en lo programa del instructor ello quer que la trasion suceder exactamente en enviar y no en el hover . En su programa acontece lo mismo a el programa del instructor pero en teoria no es lo mismo porque puede pasar que tenga un error si agregas otras funciones.

Si este post te ayudó, por favor, marca como solucionado ✓. Continúa con tus estudios
por Sergio José Parigansky
| 20.2k xp | 8 posts

Perfecto! puede ver la diferencia. Gracias a las dos. Saludos!

por Estudiante
| 96.9k xp | 3 posts

Gracias por la aclaración tenia la misma duda..!