¿Existe una pseudoclase CSS opuesta a: hover?

Esta sección fue probado por especialistas así aseguramos la veracidad de nuestro contenido.

Solución:

Si, usa :not(:hover)

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

Demostración de jsBin

Otro ejemplo; Creo que quieres: “cuando uno está suspendido, atenúa todos los demás elementos”.

Si mi suposición es correcta, y asumiendo 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;

De lo contrario … simplemente use la lógica predeterminada:

.child
   opacity: 0.2;

.child:hover
   opacity: 1;

No existe tal pseudo-clase. No es necesario que lo haya, cuando solo puede usar :not(:hover). Todo el punto de la :not() pseudoclase 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 ser :enabled o :disabled – la mayoría de los elementos son ninguno porque la semántica simplemente no se aplica, pero un elemento solo puede ser designado por el dispositivo señalador (:hover), o no (:not(:hover)). Proporcionar negaciones que ya se pueden lograr directamente utilizando :not() socavaría en gran medida su utilidad (aunque aún podría usarse para negar cualquier otro selector simple, o selectores complejos completos en el futuro).

El argumento de que tal pseudoclase sería computacionalmente menos costoso es bastante débil. La implementación más ingenua de tal pseudoclase sería un literal :not(:hover) comprobar, que no sería mejor. Cualquier implementación más compleja u optimizada y está pidiendo a los proveedores que implementen una pseudoclase que sea tan rápida o incluso más rápida que :not(:hover), algo que ya es un caso de uso bastante poco común considerando las otras opciones que tiene, como cascada y :not(:hover) (para siempre que la conexión en cascada no sea una opción) a la que tiene acceso fácilmente. Simplemente no justifica el tiempo y el esfuerzo para especificar, implementar y probar una alternativa a al menos otro método existente que sea 100% funcionalmente equivalente (y que se aplique a por lo menos 80% de los escenarios). Y también está la cuestión de nombrar una pseudoclase de este tipo: no ha propuesto un nombre para ella, y tampoco puedo pensar en uno bueno. :not-hover es solo dos bytes más corto y solo un poco menos trabajo para escribir. En todo caso, es potencialmente más confuso que :not(:hover).

Si le preocupa la especificidad, tenga en cuenta que el :not() la pseudoclase en sí misma no se cuenta para la especificidad; sólo su argumento más específico es. :not(:hover) y :hover son igualmente específicos. Así que la especificidad tampoco es un problema.

Si le preocupa la compatibilidad con el navegador, tal pseudoclase, si se hubiera introducido, probablemente se habría introducido junto con :not(), o en un nivel posterior de Selectores, ya que no apareció en CSS2 (donde :hover se introdujo por primera vez hace más de 17 años y se implementó por primera vez en IE4 un año antes). Introducirlo en un nivel posterior no tendría sentido 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 razón para cambiar.

Tenga en cuenta que esto no es lo mismo que la siguiente pregunta, que habla de eventos frente a estados (originalmente se trata de :focus en vez de :hover, pero se aplica el mismo principio): ¿CSS tiene un selector de desenfoque (pseudoclase)?

Si desea mostrar algo solo al pasar el mouse sobre otra cosa, puede usar

selector:not(:hover)

como esto:

section
   font-size:3em;


div:not(:hover) + section
 display:none;

Hover on me

Peek A Boo!

Hay varios efectos inusuales y resultados al usar :not() que debes tener en cuenta:

• :not(:not(...)), :not(p::before) no es posible
• :not(*) obviamente nunca se aplicaría
• :not(.foo) coincidirá con cualquier cosa que no sea .foo, incluidas etiquetas como y
• aumenta la especificidad de una regla, por ejemplo: #foo:not(#bar) coincidirá con el mismo elemento que el más simple #foo, pero tiene una mayor especificidad.

and operación con :not :

• Elementos que no son
  y no elementos:
  body :not(div):not(span)

or operación con :not, esto aún no está bien respaldado.

• Elementos que no son .crazy o .fancy : body :not(.crazy, .fancy)

Fuente MDN

Agradecemos que quieras añadir valor a nuestro contenido informacional tributando tu veteranía en las ilustraciones.

---

---

Utiliza Nuestro Buscador