Buenas tardes, gusto en saludarles. Tengo una duda en la parte 2 de html y css, modulo 6, clase 4 indican el siguiente códiigo para ampliar la fuente cuendo se pasa el cursor sobre el producto. mi duda es porque se coloca h2 despues del hover y no se colocar .productos li h2:hover{...}
.productos li:hover h2{ font-size: 33px; }
De antemano, muchas gracias por la respuesta.
¡Hola Gustavo!
Gracias por tu pregunta. Permíteme explicarte.
En el código que mencionas, .productos li:hover h2, se está aplicando el efecto de ampliar la fuente cuando se pasa el cursor sobre el producto. La estructura del selector .productos li:hover h2 significa lo siguiente:
.productos li: selecciona todos los elementos li que están dentro de un elemento con la clase .productos.:hover: se aplica cuando el cursor se posiciona sobre el elemento li.h2: selecciona el elemento h2 que está dentro del elemento li cuando se cumple la condición :hover.En resumen, el código .productos li:hover h2 está seleccionando el elemento h2 que está dentro de un elemento li cuando se pasa el cursor sobre ese elemento li. Esto quiere decir que el código CSS será aplicado a la etiqueta h2 cuando suceda lo que fue explicado anteriormente.
Espero que esta explicación aclare tu duda.
¡Saludos!
Hola yo tambien tenia la misma duda, de si el orden afectaba en el algo el resultado de dar ese aumento de fuente, pero al intentarlo no veo que afecte en nada.
.productos li h2:hover{
font-size: 33px;
}
Así que que me surge la duda de si se hizo asi,
.productos li:hover h2{ font-size: 33px; }
por un tema de buena practica o facilidad de lectura, es asi? o en verdad es solo una preferencia personal?