CSS: desplaza un elemento, ¿efecto para varios elementos?

Estoy buscando un método para mi problema de estacionario.CSS: desplaza un elemento, ¿efecto para varios elementos?

<div class="section"> 

<div class="image"><img src="myImage.jpg" /></div> 

<div class="layer">Lorem Ipsum</div> 

</div>

Ahora, ambas clases (imagen y capa) tienen bordes, ambos tienen un color diferente para el normal y el vuelo estacionario. ¿Hay alguna manera de hacerlo, de modo que si sobrevivo la clase de capa, se activan tanto el color del límite de la capa como el de la clase de imagen? ¿Y viceversa?

Fuente

2009-09-22 Marko

160

No necesita JavaScript para esto.

Algunos CSS lo harían. Aquí está un ejemplo:

<html> 
 
    <style type="text/css"> 
 
    .section { background:#ccc; } 
 
    .layer { background:#ddd; } 
 
    .section:hover img { border:2px solid #333; } 
 
    .section:hover .layer { border:2px solid #F90; } 
 
    </style> 
 
</head> 
 
<body> 
 
    <div class="section"> 
 
    <img src="myImage.jpg" /> 
 
    <div class="layer">Lorem Ipsum</div> 
 
    </div> 
 
</body> 
 
</html>

Fuente

2009-09-22 20:58:17 corymathews

+10

¡Okey, aquí está el ganador! :) No sabía que si tuviera algo: flotar, ¡puedo continuar con otro elemento! (algo: hover. segundo) .. Todos los días aprendes algo nuevo .. Gracias x10 – Marko

Yo tampoco lo sabía. Gracias por tu ayuda. – fadedbee

¿Qué pasa si los dos divs (uno para pasar el cursor sobre uno para mostrar) no están dentro del mismo div primario inmediato? – bikashg

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'); 
     } 
    ); 
});

Ajustar los valores y de Identificación del elemento en consecuencia :)

Fuente

2009-09-22 20:26:36 inkedmn

¡Agradable, muy bonito! ¿Qué tal si tengo múltiples secciones para los mismos nombres de clase? Ahora que he probado eso para cuatro con los mismos nombres de clase y cuando vuelo uno, ¿todos esos cambios? ¿Debo hacer que el número de serie se muestre al frente de todas las secciones? ¿Tiene jquery soporte para comodines anykind? (okey, ¡intenté google solo por él!;)) Gracias .. – Marko

Esto no es difícil de lograr, pero hay que utilizar la función de JavaScript onmouseover. Pseudoscript:

 
<div class="section "> 

<div class="image"><img src="myImage.jpg" onmouseover=".layer {border: 1px solid black;} .image {border: 1px solid black;}" /></div> 

<div class="layer">Lorem Ipsum</div> 

</div>

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

Fuente

2009-09-22 20:30:32 eykanal

+1 por usar el cambio de CSS de clase en lugar del elemento uno como otro ejemplo. – DVK

Esto también funciona, ¡gracias! Solo trato de evitar la codificación en línea tanto como pueda ...;) – Marko

:) Sí, eso es lo que obtienes cuando escribo el código rápido y sucio. – eykanal

Esto funcionó para mí en Firefox y Chrome y IE8 ...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
    <head> 
     <style type="text/css"> 
     div.section:hover div.image, div.section:hover div.layer { 
      border: solid 1px red; 
     } 
     </style> 
    </head> 
    <body> 
     <div class="section"> 
      <div class="image"><img src="myImage.jpg" /></div> 
      <div class="layer">Lorem Ipsum</div> 
     </div> 
    </body> 
</html>

... es posible que desee probar esto con IE6, así (no estoy seguro si va a trabajar allí) .

Fuente

2009-09-22 20:38:25

En realidad, puede funcionar en IE8, al parecer. Agregar el Doctype marcó la diferencia. Entonces, hay una solución pura de CSS. ;) –

Creo que la mejor opción para usted es encerrar las dos divs por otro div. A continuación, puede hacerlo mediante CSS de la siguiente manera:

<html> 
<head> 
<style> 
    div.both:hover .image { border: 1px solid blue } 
    div.both:hover .layer { border: 1px solid blue } 
</style> 
</head> 

<body> 
<div class="section"> 

<div class="both"> 
    <div class="image"><img src="myImage.jpg" /></div> 
    <div class="layer">Lorem Ipsum</div> 
</div> 

</div> 
</body> 
</html>

Fuente

2009-09-22 21:03:46 Viliam

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

NOTA estado del elemento Padres sólo puede afectar el estado elemento de un niño esta manera puede utilizar:

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

pero usted no puede use

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

Fuente

2013-09-09 11:45:26 Jnr

CSS: desplaza un elemento, ¿efecto para varios elementos?

Respuesta

Cuestiones relacionadas