¿Cómo escribir :hovery :visitedcondicionar a:before?
Lo intento a:before:hoverpero no funciona
¿Cómo escribir :hovery :visitedcondicionar a:before?
Lo intento a:before:hoverpero no funciona
Respuestas:
Esto depende de lo que realmente estés tratando de hacer.
Si simplemente desea aplicar estilos a un :beforepseudo-elemento cuando el aelemento coincide con una pseudo-clase, debe escribir a:hover:beforeo en su a:visited:beforelugar. Observe que el pseudo-elemento viene después de la pseudo-clase (y, de hecho, al final de todo el selector). Observe también que son dos cosas diferentes; llamarlos a ambos "pseudo-selectores" te va a confundir una vez que te encuentres con problemas de sintaxis como este.
Si está escribiendo CSS3, puede denotar un pseudo-elemento con dos puntos dobles para aclarar esta distinción. Por lo tanto, a:hover::beforey a:visited::before. Pero si está desarrollando para navegadores heredados como IE8 y versiones anteriores, entonces puede salirse con la suya utilizando solo dos puntos.
Este orden específico de pseudo-clases y pseudo-elementos se establece en la especificación :
Se puede agregar un pseudo-elemento 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, selector universal, selector de atributos, selector de clase, selector de ID o pseudo-clase.
Una pseudoclase es un simple selector. Sin embargo, un pseudo-elemento no lo es, a pesar de que se asemeja a un simple selector.
Sin embargo, para pseudo-clases de acción del usuario como :hover1 , si necesita que este efecto se aplique solo cuando el usuario interactúa con el pseudo-elemento en sí pero no con el aelemento, entonces esto no es posible sino a través de una solución alternativa oscura dependiente del diseño . Como implica el texto, los pseudo-elementos CSS estándar no pueden tener pseudo-clases actualmente. En ese caso, deberá aplicar :hovera un elemento secundario real en lugar de un pseudo-elemento.
1 Por supuesto, esto no se aplica a las pseudo-clases de enlaces :visitedcomo en la pregunta, ya que los pseudo-elementos no son enlaces.
text-decoration.
Escribe en a:hover::beforelugar de a::before:hover: ejemplo .
:aftervs CSS3 ::after developer.mozilla.org/en-US/docs/Web/CSS/::after (single :tiene mejor soporte)
Para cambiar el texto del enlace del menú al pasar el mouse. (Texto de idioma diferente al pasar el mouse) aquí está el
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:"ಕನ್ನಡ";
}a:hover::beforecon estilo text-decoration: underline, lo que hace que el subrayado recoja el color rojo del texto de reemplazo.
Intenta usarlo .card-listing:hover::after hovery afterusarlo ::funcionará
La respuesta de BoltClock es correcta. Lo único que quiero agregar es que si solo desea seleccionar el pseudo elemento, ponga un intervalo.
Por ejemplo:
<li><span data-icon='u'></span> List Element </li>en vez de:
<li> data-icon='u' List Element</li>De esta manera puedes simplemente decir
ul [data-icon]:hover::before {color: #f7f7f7;}que solo resaltará el pseudo elemento, no todo el elemento li
También puede restringir su acción a una sola clase usando el corchete puntiagudo derecho (">"), como lo hice en este código:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
span {
font-size:12px;
}
a {
color:green;
}
.test1>a:hover span {
display:none;
}
.test1>a:hover:before {
color:red;
content:"Apple";
}
</style>
</head>
<body>
<div class="test1">
<a href="#"><span>Google</span></a>
</div>
<div class="test2">
<a href="#"><span>Apple</span></a>
</div>
</body>
</html>Nota: El elemento emergente: before switch solo funciona en la clase .test1