¿Cómo escribir la condición :hover
y :visited
para a:before
?
Estoy probando a:before:hover
pero no funciona
Esto depende de lo que se intente hacer en realidad.
Si simplemente desea aplicar estilos a un pseudo-elemento :before
cuando el elemento a
coincide con una pseudo-clase, necesita escribir a:hover:before
o a:visited:before
en su lugar. Observa que el pseudo-elemento viene después de la pseudo-clase (y de hecho, al final de todo el selector). Fíjese también en que son dos cosas diferentes; llamar a ambos "pseudo-selectores" le va a confundir cuando se encuentre con problemas de sintaxis como éste.
Si está escribiendo CSS3, puede denotar un pseudo-elemento con dos puntos para hacer esta distinción más clara. Así, a:hover::before
y a:visited::before
. Pero si estás desarrollando para navegadores antiguos como IE8 y anteriores, entonces puedes usar dos puntos simples sin problemas.
Este orden específico de las pseudoclases y los pseudoelementos se indica en la especificación:
Un pseudo-elemento puede ser añadido a la última secuencia de selectores simples en un selector.
Una secuencia de selectores simples es una cadena de selectores simples que no están separados por un combinador. Siempre comienza con un selector de tipo o un selector universal. No se permite ningún otro selector de tipo o selector universal en la secuencia.
Un selector simple es un selector de tipo, un selector universal, un selector de atributos, un selector de clase, un selector de ID o una pseudoclase.
Una pseudo-clase es un selector simple. Un pseudo-elemento, sin embargo, no lo es, aunque se parezca a un selector simple.
Sin embargo, en el caso de las pseudoclases de acción del usuario, como :hover
1, si necesita que este efecto se aplique sólo cuando el usuario interactúa con el propio pseudoelemento pero no con el elemento a
, entonces esto no es posible más que a través de alguna oscura solución dependiente del diseño. Como se deduce del texto, los pseudoelementos CSS estándar no pueden tener pseudoclases. En ese caso, tendrá que aplicar :hover
a un elemento hijo real en lugar de a un pseudo-elemento.
Por supuesto, esto no se aplica a las pseudoclases de enlace como :visited
como en la pregunta, ya que los pseudoelementos no son enlaces;
Escribe a:hover::before
en lugar de a::before:hover
: [ejemplo](
Para cambiar el texto del enlace del menú al pasar el ratón por encima. (Texto en diferente idioma al pasar el ratón por encima) aquí está el
[ejemplo jsfiddle][1]
html:
<a align="center" href="#"><span>kannada</span></a>
css:
span {
font-size:12px;
}
a {
color:green;
}
a:hover span {
display:none;
}
a:hover:before {
color:red;
font-size:24px;
content:"ಕನ್ನಡ";
}