CSS: desplaza un elemento, efecto para múltiples elementos?

Estoy buscando un método para mi problema de estacionario.

Lorem Ipsum

Ahora, ambas clases (imagen y capa) tienen bordes, ambos tienen diferente color para normal y flotar. ¿Hay alguna manera de hacerlo así que, si sobrevivo la clase de capa, están activos tanto el color del límite de la clase de capa como el de la clase de imagen? ¿Y viceversa?

No necesitas JavaScript para esto.

Algún CSS lo haría. Aquí hay un ejemplo:

     
Lorem Ipsum

Esto funcionó para mí en Firefox, Chrome e IE8 …

       
Lorem Ipsum

… es posible que desee probar esto con IE6 también (no estoy seguro si funcionará allí).

Creo que la mejor opción para ti es incluir ambos divs por otro div. Entonces puedes hacerlo por CSS de la siguiente manera:

      
Lorem Ipsum

Esto no es difícil de lograr, pero necesita usar la función javascript onmouseover . Pseudoscript:

 
Lorem Ipsum

Usa tus propios colores También puede hacer referencia a las funciones de JavaScript en el comando mouseover.

Necesitarás usar JavaScript para lograr esto, creo.

jQuery:

 $(function(){ $("#innerContainer").hover( function(){ $("#innerContainer").css('border-color','#FFF'); $("#outerContainer").css('border-color','#FFF'); }, function(){ $("#innerContainer").css('border-color','#000'); $("#outerContainer").css('border-color','#000'); } ); }); 

Ajuste los valores y los identificadores de elementos en consecuencia 🙂

O

 .section:hover > div { background-color: #0CF; } 

NOTA El estado del elemento primario solo puede afectar el estado del elemento del niño para que pueda usar:

 .image:hover + .layer { background-color: #0CF; } .image:hover { background-color: #0CF; } 

pero no puedes usar

 .layer:hover + .image { background-color: #0CF; }