Foros del Web » Creando para Internet » CSS »

Interacción con objetos hover

Estas en el tema de Interacción con objetos hover en el foro de CSS en Foros del Web. Buenas a todos, primero disculpad por el titulo, quizás no sea demasiado claro. Mi duda es que tengo una barra con un menú "esquemático" por ...
  #1 (permalink)  
Antiguo 01/07/2013, 15:38
 
Fecha de Ingreso: julio-2013
Mensajes: 5
Antigüedad: 11 años
Puntos: 0
Pregunta Interacción con objetos hover

Buenas a todos, primero disculpad por el titulo, quizás no sea demasiado claro.
Mi duda es que tengo una barra con un menú "esquemático" por decirlo de alguna forma, y me gustaría que al pasar el ratón por cada elemento se ejecutara una transición en un cuadro de texto situado en la parte inferior de la web hacia arriba, con un texto a elegir. Es decir, que al pasar el ratón sobre un elemento del menú superior otro elemento reaccione al hover. Se entiende?

Si es esto posible, ¿podría alguien pasarme un ejemplo?

Muchas gracias a todos de antemano!
  #2 (permalink)  
Antiguo 01/07/2013, 16:07
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.489
Antigüedad: 22 años
Puntos: 2114
Respuesta: Interacción con objetos hover

Es posible bajo ciertas condiciones. Es una cuestión de la limitación de selectores que hay en CSS.

Lo habitual es que tengas un elemento, y el :hover afecte a los hijos. Pero, gracias a los selectores ~ y + puedes seleccionar elementos hermanos descendientes. Es decir, en un caso así:

Código HTML:
Ver original
  1. <p></p>

Puedes afectar al elemento span al hacer :hover al elemento p, pero no a la inversa —es decir, no funciona de forma ascendente.

El selector ~ selecciona todos los elementos hermanos descendientes. Por ejemplo:

Código HTML:
Ver original
  1. <p></p>
  2. <p></p>
  3. <p></p>
  4. <p></p>

Código CSS:
Ver original
  1. p:hover ~ p {
  2.   color: red
  3. }

Saldrían de color rojo todos los párrafos siguientes al que se le hace :hover. Ejemplo: http://jsfiddle.net/qjzeC/

Por otro lado existe el selector +, que es pareceido a ~ con la salvedad de que sólo selecciona un elemento hermano inmediatamente posterior. Luego en el ejemplo anterior, cambiando el selector a:

Código CSS:
Ver original
  1. p:hover + p

Sólo cambiaría a color rojo el siguiente párrafo seleccionado. Ejemplo: http://jsfiddle.net/qjzeC/1

Para entenderlo mejor, otro ejemplo:

Código HTML:
Ver original
  1. <p></p>
  2. <div></div>
  3. <p></p>
  4. <p></p>

Código CSS:
Ver original
  1. p:hover ~ p

Se cambian a rojo todos los siguientes párrafos al que se le hace :hover. Ejemplo: http://jsfiddle.net/qjzeC/2

Y por último, el caso donde se ve bien el funcionamiento de +. Con el mismo HTML anterior, si cambias el selector a:

Código CSS:
Ver original
  1. p:hover + p

Sólo se seleccionaría el último párrafo, ya que al pasar sobre el primero, el elemento que le sigue no es un párrafo sino un div. Ejemplo: http://jsfiddle.net/qjzeC/3

¡Dicho esto! Para poder tener alguna interacción con elementos tan separados el uno del otro, estos deberían de ser hermanos. Es decir, no te vale que un menú esté en:

body>head>nav>ul>li>a

Para interactuar con:

body>footer>div

Si quieres, puedes hacerlo con CSS usando el selector ~, pero seguramente la semántica de tu página sufrirá un revés importante.

Por lo tanto, todo este tostón para llegar a la conclusión de que con JavaScript seguramente tengas una solución mejor y más acertada.
  #3 (permalink)  
Antiguo 01/07/2013, 16:17
Avatar de Trublux  
Fecha de Ingreso: octubre-2010
Ubicación: Madrid
Mensajes: 355
Antigüedad: 13 años, 8 meses
Puntos: 48
Respuesta: Interacción con objetos hover

Para este caso en concreto creo que lo mejor sería hacerlo con JavaScript.
__________________
eZ Publish Developer Basic Legacy
eZ Publish Developer Basics (4.4)
Alojamientos rurales en España
  #4 (permalink)  
Antiguo 01/07/2013, 16:31
 
Fecha de Ingreso: julio-2013
Mensajes: 5
Antigüedad: 11 años
Puntos: 0
De acuerdo Respuesta: Interacción con objetos hover

La verdad es que el elemento no lo he definido todavía, así que quizás intente adecuarlo a lo que me has dicho.
En caso de querer hacerlo en javascript, mejor lo posteo en su apartado, o alguien tiene idea de como podría hacer algo así?

Muchisimas gracias por responder, un placer pertenecer al foro!
Saludos!

Etiquetas: hover, 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 20:34.