Coloca el cursor sobre “Todo menos” | Programar Plus

0

Agregar un estado de desplazamiento a un elemento es muy fácil. Usemos un cambio de opacidad como ejemplo:

div {
   opacity: 1.0;
}
div:hover {
   opacity: 0.5;
}

Pero, ¿qué pasa si queremos que ese estado de desplazamiento se aplique a todo menos al elemento sobre el que se desplaza? (por ejemplo, otros divs hermanos adyacentes)

Asumamos este HTML básico:

<section class="parent">
  <div></div>
  <div></div>
  <div></div>
</section>

Aplicaremos las propiedades CSS actuales a todos los hijos del padre cuando el padre esté en el estado de desplazamiento. 

.parent:hover > div {
  opacity: 0.5;
}

Luego, cuando el padre está suspendido y el div individual está suspendido, volvemos a subir la opacidad, dando el efecto final que estamos buscando.

.parent:hover > div:hover {
  opacity: 1.0;
}

¿Mundo real?

Algo similar ocurre en la aplicación Twitter para Mac en tweets individuales:

Manifestación

Esta idea se puede extender a múltiples niveles de profundidad. A continuación, se muestra un ejemplo de tres “listas”. Todos los elementos de la lista tienen opacidad total en su estado normal, pero a medida que se desplaza sobre las listas, la lista que se desplaza actualmente es un poco más opaca que las demás, y el elemento de la lista que se desplaza actualmente es completamente opaco.

Ver demostración Descargar archivos

Y sí, los viejos navegadores ya sabes quién no lo hacen: coloca el cursor sobre cualquier cosa que no sean enlaces de anclaje. Si es de misión crítica, use JavaScript para detectar eventos de mouseenter en ellos y aplicar / eliminar nombres de clases.

Actualización de agosto de 2012: Michelle Eaton escribe con este JavaScript para hacer el trabajo, si debe:

$("#all ul li").hover(function() { // Mouse over
  $(this).siblings().stop().fadeTo(300, 0.6);
  $(this).parent().siblings().stop().fadeTo(300, 0.3); 
}, function() { // Mouse out
  $(this).siblings().stop().fadeTo(300, 1);
  $(this).parent().siblings().stop().fadeTo(300, 1);
});