[SOLUCIONADO] A vueltas con hover

[dehm]

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!!

[pzin]

¿Te refieres a algo así?

Código CSS:

ul:hover #leyenda-servicios {}
 

[dehm]

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

[ArturoGallegos]

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>

[dehm]

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...

[pzin]

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.

[ArturoGallegos]

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:

<li>
     <a>....</a>
     <div>....</div>
     <ul>...</ul>
<li>
 

[dehm]

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

[ArturoGallegos]

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

retira el ID y veras que funciona.

[dehm]

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