propiedad - pseudo clases y pseudo elementos css

¿Hay una pseudoclase CSS opuesta a: hover?

Question

¿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.

Answer 1

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)?

Answer 2

Sí, use :not(:hover)

.child:not(:hover){
  opacity: 0.3;
}

jsBin demo

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!
}

Answer 3

a {
  /*styles*/
} 

es un enlace normal (no protegido)

a:hover {
  /*styles*/
} 

es un enlace fijo