En este documento vamos a aplicar de forma práctica los pseudoselectores que hemos comentado de forma más teórica en el documento de apuntes anterior (09 pseudoclases.html). Revisa la parte de CSS de este documento para ver cómo se está aplicando cada caso.
En primer lugar una configuración básica para todos los enlaces del documento:
a {
text-decoration: none;
color: green;
}
a:link {
color:brown;
font-weight: bold;
}
a:visited {
color: red;
}
a:active {
color: orange;
}
.menu a:hover {
background-color: brown;
color: white;
}
Que podemos ver aplicado sobre los siguientes enlaces. Para cualquier enlace con atributo href definido, le afectará la pseudoclase link. Al pasar el ratón sobre cada enlace se activa la pseudoclase hover, al pinchar (y solo al pinchar), usamos active, y cuando un enlace ya ha sido visitado queda formateado por visited.
El caso anterior, pero aplicado solamente a determinados enlaces, en este caso a aquellos dentro de una etiqueta de párrafo:
p a:hover {
background-color: chartreuse;
}
En este párrafo incluimos una etiqueta <a> que no tiene atributo href, y por lo tanto le afecta el formato del selector por etiqueta a, pero no le afecta el pseudoselector :link Destino de enlace
En este párrafo incluimos un enlace que cambiará de color después de visitar la página de destino: Ver enlace
En este caso cambiamos la visibilidad de un elemento oculto, mediante display: none para mostrarlo cuando pasamos el ratón sobre un elemento que nos sirve de disparador. Este es el código:
.disparador {
font-size: 30px;
border: 1px solid;
color: red;
background-color: black;
padding: 5px 10px;
position: relative;
cursor: pointer;
}
.emergente {
display: none;
background-color: lavender;
color: cadetblue;
border: 2px solid;
padding: 10px;
font-size: 15px;
font-style: italic;
position: absolute;
top: -40px;
left: 100%;
width: 200px;
}
.disparador:hover .emergente {
display: initial;
}
Y este el ejemplo:
El siguiente elemento muestra un pequeño cuadro al situar el ratón sobre él: X Contenido del cuadro emergente
El mismo comportamiento lo podemos usar para crear menús anidados emergentes. Código:
.submenu {
display: none;
position: absolute;
width: 100%;
background-color: wheat;
top: 100%;
left: 0;
}
/* Formato para el menú principal */
.menu-1 {
float: left;
width: 20%;
list-style: none;
border: 2px solid;
text-align: center;
font-family: sans-serif;
position: relative;
}
.menu-1 a {
display: block;
padding: 10px 0;
}
/* Mostramos submenu al hacer hover sobre su contenedor */
.menu-1:hover .submenu {
display: block;
}
.menu-1 a:hover {
background-color: chocolate;
color: wheat;
}
Y el ejemplo
Usando un elemento de formulario input podemos conseguir un efecto similar pero más potente con la pseudoclase checked, ya que nos permite trabajar con el evento clic y reconocer si hemos pinchado o no en el input. Código:
#cuadro_mensaje {
background-color: aquamarine;
border: 5px solid darkblue;
padding: 15px;
width: 60%;
display: none;
position: fixed;
right: 0;
width: 20%;
}
#ck_mensaje {
display: none;
}
#ck_mensaje:checked + #cuadro_mensaje {
display: block;
}
/* Controles para menú emergente */
#ck_menu, #cuadro_menu {
display: none;
}
#ck_menu:checked + #cuadro_menu {
display: block;
}
Ejmeplos de uso de elementos input checkbox para emular el evento clic en CSS: