[SOLUCIONADO] Una duda (HTML y CSS)

[Fateless]

Bueno, no tengo mucho usando HTML y CSS, pero hoy me surgió un altercado que no pude resolver, la cuestión es que por decir un ejemplo:

Tengo una etiqueta div (div1) a la cual le aplique varios estilos, junto con la pseudoclase :hover para darle una mejor apariencia. Además de esa etiqueta div, tengo otra (div2) la cual por igual tiene su propia id en la que contiene sus estilos correspondientes.

Mi pregunta es... si por alguna razón usando la pseudoclase :hover en la etiqueta div1 ¿puedo modificar los estilos de la etiqueda div2 sin afectar los estilos de la etiqueta div1?

En pocas palabras, quiero poder pasar el ratón encima de mi etiqueta div1 y que mi otra etiqueta div ósea la etiqueta div2 sea afectada por ciertos estilos.

Un saludo.

[Rafael]

¿puedo modificar los estilos de la etiqueda div2 sin afectar los estilos de la etiqueta div1?

Completamente.

La pseudoclase no es un nombre que ocupes una vez por ahí en tu documento.

La pseudo clase es un ESTADO del elemento, en este caso div1, específicamente cuando le pases el mouse.

La única manera de que afectes otra cosa, digamos el div 2 es que este esté dentro de div1. El cual es el caso de tu pregunta 2.

[Fateless]

Iniciado por Rafael

Completamente.

La pseudoclase no es un nombre que ocupes una vez por ahí en tu documento.

La pseudo clase es un ESTADO del elemento, en este caso div1, específicamente cuando le pases el mouse.

La única manera de que afectes otra cosa, digamos el div 2 es que este esté dentro de div1. El cual es el caso de tu pregunta 2.

Entonces, ¿me dices que no hay forma de afectar este mismo (div2) a menos que esté en el div1?

A lo que te respondo, el div2 está muy por lejos del div1, son elementos independientes, me refiero a que el div1 tiene un propósito diferente al que le doy al div2, lo único que quiero es que esté mismo (ósea el div2) se mueva de lugar al pasar el puntero por el div1.

Si es así ¿no hay forma de hacerlo con javascrip?

Saludos.

[Rafael]

Así como lo planteas no se puede...

Trata de explicar mejor tus ideas. ¿Cómo vamos a adivinar que es lo que quieres?

Abre una consulta en JavaScript pero EXPLICA lo que necesitas claramente.

[pzin]

Si es un elemento hermano descendiente al que quieres afectar, puedes interactuar con ~.

Código CSS:

.div1:hover ~ .div2 {
  color: firebrick;
}
 

Pero claro, tienen que ser elementos hermanos. Por otro lado también podría estar dentro de otro elemento que sea hermano descendiente:

Código CSS:

.div1:hover ~ .otracosa .div2 {
  color: firebrick;
}
 

Como ves depende de la estructura HTML. Pero es probable que acabes usando JavaScript.

[Rafael]

Pzin... trata de usar ladrillos a prueba de incendios.

[pzin]

Estilo firebrick.

[Fateless]

Tomando en cuenta las recomendaciones que ambos me dieron, logre el efecto que buscaba, muchísimas gracias a ambos.

Saludos.