Foros del Web » Creando para Internet » CSS »

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

Estas en el tema de «Selector general de elementos hermanos», ¿Puede usarse en doble sentido? en el foro de CSS en Foros del Web. ¡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 ...
  #1 (permalink)  
Antiguo 03/02/2014, 20:32
Avatar de rbnncls  
Fecha de Ingreso: septiembre-2013
Ubicación: Chipiona, CÁDIZ
Mensajes: 20
Antigüedad: 10 años, 10 meses
Puntos: 0
Información «Selector general de elementos hermanos», ¿Puede usarse en doble sentido?

¡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.
  #2 (permalink)  
Antiguo 04/02/2014, 02:18
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.489
Antigüedad: 22 años
Puntos: 2114
Respuesta: «Selector general de elementos hermanos», ¿Puede usarse en doble sentido?

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.
  #3 (permalink)  
Antiguo 04/02/2014, 08:17
Avatar de rbnncls  
Fecha de Ingreso: septiembre-2013
Ubicación: Chipiona, CÁDIZ
Mensajes: 20
Antigüedad: 10 años, 10 meses
Puntos: 0
De acuerdo Respuesta: «Selector general de elementos hermanos», ¿Puede usarse en doble sentido?

¡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.
  #4 (permalink)  
Antiguo 04/02/2014, 08:28
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.489
Antigüedad: 22 años
Puntos: 2114
Respuesta: «Selector general de elementos hermanos», ¿Puede usarse en doble sentido?

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.
  #5 (permalink)  
Antiguo 04/02/2014, 10:42
Avatar de rbnncls  
Fecha de Ingreso: septiembre-2013
Ubicación: Chipiona, CÁDIZ
Mensajes: 20
Antigüedad: 10 años, 10 meses
Puntos: 0
Información Respuesta: «Selector general de elementos hermanos», ¿Puede usarse en doble sentido?

¡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.
  #6 (permalink)  
Antiguo 04/02/2014, 11:00
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.489
Antigüedad: 22 años
Puntos: 2114
Respuesta: «Selector general de elementos hermanos», ¿Puede usarse en doble sentido?

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:
Ver original
  1. div.rojo:hover {
  2.     background: black;
  3. }
  4.  
  5. div.rojo:hover + div.azul {
  6.     background: grey;
  7. }

Etiquetas: elementos, selectores
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 22:13.