Affectando div: hover con otro div

Estoy haciendo una galería en la que al pasar el puntero sobre la imagen principal, las miniaturas deberían volverse transparentes. Me gustaría lograr esto con CSS puro, pero no estoy seguro si eso es posible.Affectando div: hover con otro div

CSS:

/* should affect thumbs but not main */ 
/* obviously this code wouldn't work */ 
#main:hover, #thumbs { 
    opacity: .5; 
}

HTML:

<div id="main"> 
    Hover over me to change #thumbs 
</div> 
<div id="thumbs"> 
    I change when you hover over #main 
</div>

Es esto posible el uso de CSS puro?

Fuente

2011-08-15 JacobTheDev

Claro, sólo tiene que utilizar el selector adyacente hermanos:

#div1:hover + #div2 { 
    ... 
}

Un ejemplo aquí: http://jsfiddle.net/6BfR6/94/

Fuente

2011-08-15 19:31:29 Nightfirecat

+1 increíble ... ¡ni siquiera sabía que esto existía! http://meyerweb.com/eric/articles/webrev/200007a.html – samccone

¡Guau! ¡Gracias! ¡Eso es absolutamente perfecto! Al igual que el tipo que está sobre mí, no tenía idea de que existiera. Perfecto. – JacobTheDev

+1 No tenía idea de que pudieras hacer esto sin Javascript. –

-1

incluso si lo es, no va a funcionar en IE :)

se recomienda usar evento onmouseover

sin embargo, es agradable pregunta y estoy ansioso por ver si alguien tiene una solución de hacerlo a través del navegador a través de css

Fuente

2011-08-15 19:31:03 mkk

No necesita funcionar en IE, ya sé cómo escribir la alternativa, pero no creo que vaya a molestarme con eso. Es más un sitio personal. – JacobTheDev

@rev: vea la solución proporcionada por Nightfirecat. Es increíble y funciona en IE 7 y 8. He probado – mkk

. Puede hacerlo solo con CSS. Ver mi [respuesta del widget de calificación de barra de señal de CSS puro] (http://stackoverflow.com/questions/4502633/how-to-affect-other-elements-when-a-div-is-hovered/32470900#32470900), que muestra que puedes modificar el estilo de los elementos que incluso (aparecen) aparecen en el DOM * antes de * el que está cerca. –

Solo los elementos secundarios de un selector pueden verse afectados. De lo contrario, necesitarás usar javascript.

Por ejemplo:

div:hover #childDiv { 
    background: green; 
}

Fuente

2011-08-15 19:31:14 Trevor

-1

Creo que va a necesitar algo de JavaScript para eso.

Fuente

2011-08-15 19:31:17

Puede hacerlo solo con CSS. Ver mi [respuesta del widget de calificación de barra de señal de CSS puro] (http://stackoverflow.com/questions/4502633/how-to-affect-other-elements-when-a-div-is-hovered/32470900#32470900), que muestra que puedes modificar el estilo de los elementos que incluso (aparecen) aparecen en el DOM * antes de * el que está cerca. –

en serio? ¿Bajar votos después de 4 años? –

Ahora está tan mal como en ese momento. Me encontré con la respuesta ayer. No soy un moderador que podría leer las respuestas a medida que se publican; solo un usuario aleatorio que aterrizó aquí desde una búsqueda web. –

-1

No. Tendría que usar Javascript.

Fuente

2011-08-15 19:31:18

# div1: libración + # div2 { ... }

funciona bien en IE 7, 8, 9 y 10. No es necesario ningún JS o onovermouse y NO SOLAMENTE Los elementos secundarios de un selector pueden verse afectados.

Pruebe el enlace de ejemplo de "Nightfirecat".

Fuente

2013-03-10 12:44:38 dsgsd

Affectando div: hover con otro div

Respuesta

Cuestiones relacionadas