Foros del Web » Creando para Internet » CSS »

[SOLUCIONADO] A vueltas con hover

Estas en el tema de A vueltas con hover en el foro de CSS en Foros del Web. Hola, he leído algunos mensajes en el foro relacionados con hover, pero no se adaptan exactamente a lo que me pasa. La cosa es que ...
  #1 (permalink)  
Antiguo 11/07/2013, 18:16
 
Fecha de Ingreso: septiembre-2010
Mensajes: 494
Antigüedad: 13 años, 6 meses
Puntos: 10
A vueltas con hover

Hola, he leído algunos mensajes en el foro relacionados con hover, pero no se adaptan exactamente a lo que me pasa.

La cosa es que tengo el siguiente html (extracto):
Código:
<ul>
    <li>............</li>
    ..................
    <li id="servicios">
    <a href="#">SERVICIOS</a>
    <div id="leyenda-servicios">Aqui va un texto flotante</div>
    <ul>
        <li>....</li>
        <li>....</li>
        ............
    </ul>
    </li>
</ul>
Pertenece a una barra de menú horizontal.

Pues bien, además de que se despliegue el submenú, al pasar el ratón por las opciones del menú, me gustaría que el elemento <div> apareciera también, en forma de cuadro flotante.
Lo que pasa es que quiero que sólo aparezca al pasar el ratón por el menú, y no por los elementos del submenú, que es lo que ahora me pasa

Este es el CSS
Código:
#servicios:hover  #leyenda-servicios
{
opacity:		1;
}
Muchas gracias por adelantado!!
  #2 (permalink)  
Antiguo 11/07/2013, 18:24
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.488
Antigüedad: 21 años, 7 meses
Puntos: 2114
Respuesta: a vueltas con hover

¿Te refieres a algo así?

Código CSS:
Ver original
  1. ul:hover #leyenda-servicios {}
  #3 (permalink)  
Antiguo 11/07/2013, 18:55
 
Fecha de Ingreso: septiembre-2010
Mensajes: 494
Antigüedad: 13 años, 6 meses
Puntos: 10
Respuesta: a vueltas con hover

No no, justo al contrario. La verdad es que releo mi mensaje y me explico tan bien como domino el CSS

Lo que pasa es que ahora ese div se me muestra cuando paso el ratón por el elemento del menú y por los submenus dependientes de ese elemento, y yo sólo quiero que aparezca cuando pase por el elemento del menú, pero no por los submenus que cuelgan de éste.

Saludos
  #4 (permalink)  
Antiguo 11/07/2013, 20:35
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 6.774
Antigüedad: 16 años, 1 mes
Puntos: 1146
Respuesta: a vueltas con hover

quita la id del <div> esta no es necesaria, solo usa

li:hover>div{}

el selector > hace que solo afecte a los hijos directos del elemento en cuestión en este caso <li>
  #5 (permalink)  
Antiguo 12/07/2013, 07:29
 
Fecha de Ingreso: septiembre-2010
Mensajes: 494
Antigüedad: 13 años, 6 meses
Puntos: 10
Respuesta: a vueltas con hover

Hola ArturoGallegos:

Pues estoy igual. El <div> queda afectado al pasar el ratón por el elemento del menú, así como de los submenus que cuelgan de éste, y yo querría que sólo quede afectado al pasar por el elemento del menu, pero no de los submenús.

No sé si será tema del html, que esté mal estructurado...
  #6 (permalink)  
Antiguo 12/07/2013, 07:54
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.488
Antigüedad: 21 años, 7 meses
Puntos: 2114
Respuesta: a vueltas con hover

Creo que lo que quieres hacer no se puede.

Si te entiendo bien, es que al pasar por el submenú, quieres que ese div se quede oculto, ¿no? Si es así, no se puede hacer. Porque al estar en el submenú sigues estando en el menú. Es decir, si estás encima del elemento hijo sigues estando encima del elemento padre.
  #7 (permalink)  
Antiguo 12/07/2013, 09:53
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 6.774
Antigüedad: 16 años, 1 mes
Puntos: 1146
Respuesta: a vueltas con hover

un ultimo intento para decir que si se puede, si esto no funciona como tu quieres concordare con @pzin

en lugar de usar li:hover>div{...} intenta con a:hover+div{...}
de esa forma se mostrara cuando estés sobre el <a> hermano del div, claro la estructura siempre deberá ser
Código HTML:
Ver original
  1. <li>
  2.      <a>....</a>
  3.      <div>....</div>
  4.      <ul>...</ul>
  5. <li>
  #8 (permalink)  
Antiguo 12/07/2013, 10:35
 
Fecha de Ingreso: septiembre-2010
Mensajes: 494
Antigüedad: 13 años, 6 meses
Puntos: 10
Respuesta: a vueltas con hover

Bueno, pues muchísimas gracias a ambos.
Efectivamente, la solución iba por el tema de buscar hermanos
Sólo un matiz, que tampoco sé muy bien el por qué....
He tenido que hacer así:
Código:
a:hover + #leyenda-servicios
	{	}
con el html así:
Código:
<li>
     <a>....</a>
     <div id="leyenda-servicios">....</div>
     <ul>...</ul>
<li>
(Realmente no sé por qué no funciona con la etiqueta <div> y he de ponerle un identificador, pero....bueno, ya funciona.

Saludos y reitero las gracias
  #9 (permalink)  
Antiguo 12/07/2013, 11:03
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 6.774
Antigüedad: 16 años, 1 mes
Puntos: 1146
Respuesta: a vueltas con hover

es por cuestión de jerarquías y/o estilos heredados

retira el ID y veras que funciona.
  #10 (permalink)  
Antiguo 14/07/2013, 15:23
 
Fecha de Ingreso: septiembre-2010
Mensajes: 494
Antigüedad: 13 años, 6 meses
Puntos: 10
Respuesta: a vueltas con hover

Hola:
Créeme si te digo que pienso como tú, y sin embargo no sé por qué, no funciona así. Para mi es frustrante no saber por qué pasan (o no pasan) las cosas, pero no doy con la tecla.
El caso es que dejando la etiqueta (finalmente he puesto un class, ya que el cuadrito flotante ha de abrirse cada vez que el ratón pase por cada elemento del menú horizontal indicando cosas distintas) funciona, y con el simple <div> no.

En fin, pese a que ya hace lo que yo quiero, le daré mas vueltas, a ver donde está el quid de la cuestión.

Saludos cordiales

Etiquetas: hover, html
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 04:24.