propiedad - pseudo clases y pseudo elementos css
¿Hay una pseudoclase CSS opuesta a: hover? (3)
¿Hay una pseudoclase en CSS para especificar
:not(:hover)
¿O es esa la única forma de especificar un artículo que no está siendo suspendido?
Revisé varias referencias de CSS3, y no veo ninguna mención a una pseudoclase de CSS para especificar lo contrario de: hover.
No hay tal pseudo-clase. No es necesario, cuando puedes usar :not(:hover) . El objetivo de la :not() es permitir a los autores escribir negaciones sin tener que especificar negaciones separadas de cada pseudoclase dinámica existente (y futura) donde un elemento solo puede coincidir o no con la pseudoclase .
Por ejemplo, solo algunos elementos pueden estar :enabled o :disabled : la mayoría de los elementos no son ni porque la semántica simplemente no se aplique, pero un elemento solo puede ser designado por el dispositivo señalador ( :hover ), o no ( :not(:hover) ). Proporcionar negaciones que ya se pueden lograr de manera directa utilizando :not() socavaría en gran medida su utilidad (aunque podría utilizarse para negar cualquier otro selector simple, o selectores complejos completos más adelante).
El argumento de que tal pseudo-clase sería computacionalmente menos costosa es bastante débil. La implementación más ingenua de tal pseudo-clase sería una verificación literal :not(:hover) , que no sería mejor. Cualquier implementación más compleja u optimizada le pide a los proveedores que implementen una pseudo clase que sea tan rápida o incluso más rápida que :not(:hover) , algo que ya es bastante poco común de un caso de uso considerando las otras opciones que tiene como en cascada y :not(:hover) (para cuando la cascada no es una opción) a la que tiene acceso fácilmente. Simplemente no justifica el tiempo y esfuerzo para especificar, implementar y probar una alternativa a al menos otro método existente que es 100% funcionalmente equivalente (y uno que se aplica a al menos el 80% de los escenarios). Y también está el tema de nombrar a esa clase de pseudo-clase: no le han propuesto un nombre, y tampoco puedo pensar en una buena. :not-hover es solo más corto en dos bytes y solo marginalmente menos trabajo de tipear. En todo caso, es potencialmente más confuso que :not(:hover) .
Si le preocupa la especificidad, tenga en cuenta que la pseudoclase :not() en sí no cuenta para la especificidad; solo su argumento más específico es . :not(:hover) y :hover son igualmente específicos. Entonces, la especificidad tampoco es un problema.
Si le preocupa el soporte del navegador, dicha pseudoclase, si se introdujera, probablemente se habría introducido junto con :not() , o en un nivel posterior de Selectors, ya que no apareció en CSS2 (donde :hover was introducido por primera vez hace más de 17 años, y implementado por primera vez en IE4 otro año antes). Introducirlo en un nivel posterior sería inútil porque los autores simplemente se verían obligados a seguir usando :not(:hover) hasta que los navegadores comiencen a implementar esta nueva pseudoclase de todos modos, y no tendrían ninguna razón para cambiar.
Tenga en cuenta que esto no es lo mismo que la siguiente pregunta, que trata sobre eventos vs estados (originalmente se trata de :focus rather than :hover , pero se aplica el mismo principio): ¿CSS tiene un selector de desenfoque (pseudoclase)?
Sí, use :not(:hover)
.child:not(:hover){
opacity: 0.3;
}
Otro ejemplo; Creo que quieres: "cuando uno está suspendido, atenúa todos los demás elementos" .
Si mi suposición es correcta, y suponiendo que todos sus selectores están dentro del mismo padre:
.parent:hover .child{
opacity: 0.2; // Dim all other elements
}
.child:hover{
opacity: 1; // Not the hovered one
}
.child{
display:inline-block;
background:#000;
border:1px solid #fff;
width: 50px;
height: 50px;
transition: 0.4s;
}
.parent:hover .child{
opacity: 0.3;
}
.parent .child:hover{
opacity: 1;
}
<div class="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
De lo contrario ... simplemente use la lógica predeterminada:
.child{
opacity: 0.2; // Yey, not hovered!
}
.child:hover{
opacity: 1; // ME! ME! ME!
}
a {
/*styles*/
}
es un enlace normal (no protegido)
a:hover {
/*styles*/
}
es un enlace fijo