Estados de los elementos de HTML y Ejercicio Final

← Diseño Web ⌂ Home

Pseudo-classes

Las pseudo-classes son usadas para definir un estado especial en un elemento de html y aplicar una clase de css especifica. Por ejemplo:

La sintaxis para definir una pseudo-classe es la siguiente:

selector:pseudo-class {
    property: value;
}

Continuando con nuestro código agregaremos un evento cuando se haga un hover sobre un elemento de nuestro menú:

.header .menu .link:hover {
    text-decoration: underline;
}

Podemos observar que cuando se haga hover se agregará la propiedad de underline. Ahora agreguemos una sombra al botón de comprar:

.tshirt-btn-buy:hover {
    box-shadow: 2px 2px 2px 1px rgba(0,0,0, 0.2);
}

Pseudo-classes y clases de CSS

Las pseudo clases pueden ser usadas junto a clases de CSS, para lograr efectos interesantes, por ejemplo, mostrar el precio de una playera cuando se haga hover en un contenedor de una playera:

.tshirt:hover .tshirt-price {
    display: block;
}

y vamos a hacer que la playera aparezca oculta desde el inicio con un display none:

.tshirt-price {
    font-size: 24px;
    margin: 0;
    display: none;
}

Ejercicio 3 Final

El código para descarga hasta este punto de los tutoriales: Ejercicio 3 Final