«Selector general de elementos hermanos», ¿Puede usarse en doble sentido?

[rbnncls]

¡Hola!

Estoy creando una página con una especie de instrucciones, el caso es que usé unas imágenes GIF's y tuve la idea de que cuando el cursor pasase por encima, estas se agrandasen, y el texto a su lado cogiese un margin-top y mantuviese "medianamente" la alineación.

No soy experto ni nada, pero me gusta aprender cosas nuevas y estuve leyendo sobre los selectores y esa opción de... Poder afectar a un elemento, mediante la interacción inmediata con otro distinto.


Aquí os dejo un CodePen para que veáis lo que tengo hecho:

http://codepen.io/RubenNicolas/pen/Awmeo


Sé que puedo tener el código un poco desastroso y que quizá sobre bastante pero es que cuando me pongo a escribir me gusta usar el Notepad++ y poner hasta el código inline así no me tengo que mover arriba y abajo. Por eso quizá no tengo experiencia estructurando el archivo.css


En cualquier caso,
mi idea, es que al pasar el cursor por la imagen, el texto coja ese margin y ese doble borde.

¡PERO! También quiero que al hacer hover sobre el texto, las imágenes se ensanchen, y viceversa.

Y he ahí mi problema, que no me funciona en viceversa

Probé esto:

Código:

 .gifs:hover + .textogifs {
         text-shadow: 1px 0 #fff, -1px 0 #fff, 0 1px #fff, 0 -1px #fff, 2px 0 #000, -2px 0 #000, 0 2px #000, 0 -2px #000;
         margin-top:5%;
         z-index:3;
         -moz-transition: all 1s;
         -webkit-transition: all 1s;
         -o-transition: all 1s;
         transition: all 1s;
 }
 .textogifs:hover + .gifs {
         width:70%;
         transition: width 1s;
         -moz-transition: all 1s;
         -webkit-transition: all 1s;
         -o-transition: all 1s;
         transition: all 1s;
 }

He pensado que quizá el selector "adyacente" solo se refiere a los "hermanos" que le siguen a la derecha →→→
Pero probé con .textogifs:hover ~ .gifs y tampoco funciona.

Así que también he pensado que quizá ese código se sobreescriba, pero no puede ser porque en ese caso funcionaría sobre el texto ya que es el que coloqué debajo en las pruebas.


Seguramente alguien tendrá otra forma de hacer lo que yo quiero hacer, solo que no me lo he pensado mucho e intento hacerlo así y ya quiero saber si hay alguna solución.

En cualquier caso agradezco vuestra ayuda, y si me contáis otra forma de conseguir eso mismo que yo quiero hacer con CSS u de otra forma más fácil.

PD.: Lamento escribir tanto. No consigo corregir esta costumbre.

[pzin]

Como bien dices los selectores CSS siempre seleccionan elementos posteriores y, al menos, que estén al mismo nivel. Tanto + como ~ son selectores de elementos adyacentes posteriores, la diferencia es que + selecciona el primer elemento posterior, y ~ selecciona todos los elementos posteriores.

No obstante, eso de elementos posteriores siempre se refiere al HTML. Por lo que lo que quieres hacer sería perfectamente posible, ya que sólo tienes que invertir el orden de cómo aparecen los elementos en el HTML y luego volver a ponerlos como quieras con CSS —supongo que con float: left/right debería de ser suficiente, que no lo sé porque no me paré a mirar bien el código, ya que marea un poco.

[rbnncls]

¡Gracias por tu respuesta, pzin!

No tenía asegurado que el que estuviera antes en el código es el que realizar el selector hacia el siguiente "hermano".

Ahora que lo sé, lo que no sé, es cómo hacer para que el elemento posterior afecte al elemento anterior.

Ammm el float:right; lo apliqué a los dos elementos, y los encerré en un div con la idea de que el selector ~ actuase hacia atrás también. Pero no, así que no sé

¡Gracias por vuestra ayuda! Seguiré leyendo sobre Javascript que estoy empezando, a ver si hay manera.

[pzin]

Como decía no puedes seleccionar un elemento anterior. Es como una familia con cinco hijos; los libros del hermano mayor le van a servir a los demás pero los de los pequeños no les van a servir al sus hermanos mayores.

Entonces lo que tienes que hacer es cambiar el orden en el que aparecen los elementos en el HTML y a su vez cambiar esos elementos en la maquetación, o en el CSS vaya.

Un ejemplo sencillo:



Verás que aparecen el azul y luego el rojo, pero en el HTML está primero el rojo y luego el azul. Entonces si pasa por encima del rojo, el elemento que le sigue (en el HTML) cambia de color de fondo.

[rbnncls]

¡Perdonen mi torpeza!

Es que era muy tarde y no estaba en todas mis facultades, ahora que me he puesto más despejado pues he encontrado la solución y no tenía nada que ver con esto al final.

Yo quería esto:

http://jsfiddle.net/LHJ6j/3/

(no puedo usar HTML para embeber el JSFiddle )

Pero intentaba usar el selector de elementos hermanos en ambos sentidos.
Y sí, pzin entendí tu explicación, pero según tú decías, iba a ser el texto el que agrandase la imagen, pero entonces no funcionaría al hacer hover en la imagen, yo quería ambas cosas y al final ha sido una chorrada.

Gracias a todos por leer y su ayuda.

Saludos.

[pzin]

Pues si.

De todas formas, si quisieras cambiar ambos estilos al pasar solamente sobre un elemento, también podrías hacerlo. Algo así:

Código CSS:

div.rojo:hover {
    background: black;
}
 
div.rojo:hover + div.azul {
    background: grey;
}