Guardado en: Hojas de estilo CSS
¿Por qué dar estilo a los enlaces de forma tradicional -texto destacado de diferente color al resto- pudiendo variar el estilo de más elementos? Los siguientes estilos nos permiten definir dos formatos para el un evento :hover
El código de una lista de enlaces para el ejemplo podría ser el siguiente:
<div id=”links”>
<ul>
<li><a href=”">Este es el enlace uno</a></li>
<li><a href=”">Este es el enlace dos</a></li>
<li><a href=”">Y este, obviamente, es el enlace tres</a></li>
</ul>
</div>
Definamos ahora los estilos CSS
1.- Creamos el estilo para el div general que contiene la lista de enlaces, estableciendo propiedades como ancho, color de fondo, borde,…
div#links {
color: #333333;
border: 3 px solid #e5e5e5;
padding: 15 px;
width: 150 px;
}
2.- Establecemos el formato para la lista <ul> <li> de enlaces.
div#links ul {
padding: 0 px;
margin: 5 px;
}
div#links ul li {
list-style-image: url (’img/icon-gif’)
margin-left: 5 px;
}
3.- Por último, los estilos para los diferentes estados de un enlace
div#links ul li a {
color: #000000;
text-decoration: none;
}
4.- Llegamos a la parte interesante de la cuestión.. Establecer dos formatos diferentes para el mismo evento (a priori) de :hover.
Primer estilo :hover que se activa cuando el usuario desplaza el cursor sobre el div que contiene el enlace
div#links: hover ul li a {
color: #FFFFFF;
text-decoration: underline;
}
Segundo estilo :hover que se activa cuando el usuario desplaza el cursor sobre el texto que contiene el enlace.
div#links ul li a:hover {
background-color: #cccccc;
color: #333333;
text-decoration: none;
}
