Entrar

extraño comportamiento en los enlaces

isaacaaron · · Solicitar retirada
Hola gente hoy me he encontrado con un caso extraño en los enlaces que todavía no consigo averiguar qué está pasando, si alguien le ha pasado o sabe algo que comente, pongo primero el ejemplo y ahora explico:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Documento sin título</title>
<style type="text/css">
a.link {
color:#000000;
}
a:visited {
color:#CC66CC;
}
a:hover {
color: #FFFF00;
}
a:active {
color: #F00;
}
/*clase*/
a.prueba:link {
color:#9F0;
}
</style>
</head>

<body>
<a class="prueba" href="http://www.terra.es">enlace </a>
<a href="http://www.terra.es">enlace </a>

</body>
</html>
Aquí tengo la etiqueta <a> con cada uno de los estados, esos estilos se aplicaran a todos los enlaces verdad, hasta ahí todo bien. Después tengo un enlace con una clase y su correspondiente estado que sería link en este caso. A veces en mis diseños solo quiero modificar un en lace en concreto y un estado en concreto es decir, quiero como en el ejemplo que el enlace con la clase .prueba tenga un color pero que después sus otros estados quiero que los aplique de los estados generales es decir, de a:visited, a:hover, a:active.
¿Porque los navegadores no aplican los estilos de a:hover, a:active al enlace con la clase .prueba hasta que el enlace sea visitado?

probad el codigo
isaacaaron · · Solicitar retirada
p.d: el enlace de la clase .prueba no aplica los estilos de a:hover como comente hasta que no este visitado pero, esto solo pasa cuando en a.prueba:link tiene las mismas propiedades que a:hover como en el ejemplo que puse, ya que en la clase .prueba y estado link tiene un color y al poner el raton encima deberia aplicar el color a:hover pero no lo hace. Si pones cualquier propiedad en a:hover que no tengas en a.prueba:link entonces no hace falta que este visitado el enlace, el navegador si aplica los estilos.

Es un poco lio esto pero si probais el codigo vereis a que me refiero con todo esto.
isaacaaron · · Solicitar retirada
p.d: el enlace de la clase .prueba no aplica los estilos de a:hover como comente hasta que no este visitado pero, esto solo pasa cuando en a.prueba:link tiene las mismas propiedades que a:hover como en el ejemplo que puse, ya que en la clase .prueba y estado link tiene un color y al poner el raton encima deberia aplicar el color a:hover pero no lo hace. Si pones cualquier propiedad en a:hover que no tengas en a.prueba:link entonces no hace falta que este visitado el enlace, el navegador si aplica los estilos.

Es un poco lio esto pero si probais el codigo vereis a que me refiero con todo esto.
skaparate · · Solicitar retirada
Hola!

Es el comportamiento esperado en realidad :P.

Los elementos, clases, id, pseudo-[elementos|clases] tienen un valor asignado por parte del navegador:



Tipo
Valor
Ejemplos


Id
100
#unId


Clase
10
.una-clase


Pseudo Clase
10
a:hover


Pseudo elemento
10
td:first-child


Etiqueta (o elemento)
1
La etiqueta a, p o div



Los estilos en línea (los definidos a través de style, como <a style="reglas">) tienen el mayor valor y reemplazarán a cualquier otro valor ya definido.

Teniendo en cuenta la tabla anterior, los valores de tus estilos son:

a:link -> a vale 1 y :link vale 10 = 11.
a:visited -> a vale 1 y :visited vale 10 = 11.
a:hover -> a vale 1 y :hover vale 10 = 11.
a:active -> a vale 1 y :active vale 10 = 11.
a.prueba:link -> a vale 1, .prueba vale 10 y :link vale 10 = 21.

El hecho de que el enlace .prueba no cambie es porque :link tiene precedencia sobre los demás, por lo que los estados :hover, :active, y :visited no cambian.

Solución: quita el :link de a.prueba:link y funcionará:

a:link { color:#000000; }
a.prueba { color:#9F0; }

a:visited { color:#CC66CC; }
a:hover { color: #FFFF00; }
a:active { color: #F00; }

Aquí el orden también es importante, puesto que si defines a.prueba después de los estados (visited, hover, etc.), el enlace se comportará igual que antes, vale decir, no cambiarán los estados.
skaparate · · Solicitar retirada
Ahora entiendo el porqué y corrígeme por favor si me equivoco al hacer clic en el enlace y ya estar visitado ya si funciona y aplicaba las reglas de a:hover general, porque ya deja de estar en ese estado :link esta Pseudo Clase y pasa al estado a:visited y por tanto ya no le afecta la especificidad de , a.prueba:link ¿estoy en lo cierto?

La verdad es que no lo sé xD. Cuando revisé el problema también deduje lo mismo, pero no lo sé a "ciencia cierta" y, de hecho, no se me ocurre otro motivo.

Tal vez otro usuario pueda ayudarnos :P.
isaacaaron · · Solicitar retirada
Pues a mi me pasa igual y después de hacer muchas pruebas creo que es lo que te comente, otra cosa no se me ocurre. Voy a pegarte el mismo ejemplo que con el que abrí el debate pero ahora en vez de poner a.prueba:link prueba a poner a.prueba.hover veras que es ahora el :active general el que no se aplica, pero en este caso no es como en a.prueba:link que una vez que haces clic en el enlace y pasa al estado :visited general ya si funciona. Esta vez no funcionara nunca porque cuando te pones encima del enlace y haces clic para que se active :active general no cambiara nada ya que siempre se está activando el estado a.prueba:hover porque estas encima de enlace y esa pseudo-clase la que tiene mas especifidad y aunque hagas clic para activar :active general al estar encima siempre será a.prueba:hover el que ganara.

Por eso estoy seguro que es por lo mismo. Te copio el mismo codigo modificado ahora con a.prueba:hover

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Documento sin título</title>
<style type="text/css">
a.link {
color:#000000;
}
a:visited {
color:#CC66CC;
}
a:hover {
color: #FFFF00;
}
a:active {
color: #F00;
}
/*clase*/
a.prueba:hover {
color:#9F0;
}
</style>
</head>

<body>
<a class="prueba" href="http://www.terra.es">enlace </a>
<a href="http://www.terra.es">enlace </a>

</body>