parrafos - title css
¿Cómo escribir: condición de desplazamiento para un: antes y un: después? (6)
Escriba a:hover::before lugar de a::before:hover : example .
¿Cómo escribir :hover y :visited condición para a:before ?
Estoy intentando a:before:hover pero no funciona
Esto depende de lo que realmente estés tratando de hacer.
Si simplemente desea aplicar estilos a un :before pseudoelemento cuando el elemento a coincide con una pseudo-clase, necesita escribir a:hover:before o a:visited:before . Observe que el pseudo-elemento viene después de la pseudo-clase (y de hecho, al final de todo el selector). Note también que son dos cosas diferentes; llamándolos a ambos "pseudo-selectores" te 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::before y a:visited::before . Pero si está desarrollando para navegadores heredados como IE8 y versiones anteriores, entonces puede salirse con el uso de dos puntos individuales muy bien.
Este orden específico de pseudo-clases y pseudo-elementos se establece en la spec :
Se puede añadir 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. Ningún otro tipo de selector o selector universal está permitido en la secuencia.
Un selector simple es un selector de tipo, un selector universal, un selector de atributo, un selector de clase, un selector de ID o una pseudo-clase.
Una pseudo-clase es un selector simple. Un pseudo-elemento, sin embargo, no lo es, aunque se parece a un simple selector.
Sin embargo, para las pseudo-clases de acción del usuario, tales como :hover 1 , si necesita este efecto para aplicar solo cuando el usuario interactúa con el pseudo-elemento en sí pero no con el elemento a, entonces esto no es posible más que a través de algún diseño oscuro -dependiente de la solución. Como lo indica el texto, los pseudo-elementos CSS estándar no pueden tener pseudo-clases actualmente. En ese caso, deberá aplicar :hover a un elemento secundario real en lugar de un pseudo-elemento.
1 Por supuesto, esto no se aplica a las pseudo-clases de enlaces, tales como :visited como en la pregunta, ya que los pseudo-elementos no son enlaces.
Intente usar .card-listing:hover::after hover y after usar :: wil work
La respuesta de BoltClock es correcta. Lo único que quiero añadir es que si solo desea seleccionar el pseudoelemento, coloque un intervalo.
Por ejemplo:
<li><span data-icon=''u''></span> List Element </li>
en lugar de:
<li> data-icon=''u'' List Element</li>
De esta manera usted simplemente puede decir
ul [data-icon]:hover::before {color: #f7f7f7;}
que solo resaltará el pseudo elemento, no todo el elemento li
Para cambiar el texto del enlace del menú en mouseover. (Texto en diferentes idiomas al pasar el mouse) aquí está la
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:"ಕನ್ನಡ";
}
También puede restringir su acción a solo una clase usando el corchete puntiagudo correcto (">"), como lo he hecho 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 flotante: antes de que el interruptor funcione solo en la clase .test1