Eventos ommouseover y onmouseout

[rogeliomx]

Hola, tengo un div con los eventos ommouseover y onmouseout establecidos estos llaman a una funcion para poner efecto toggle a otro div que se abre dentro del div padre, todo ya esta hecho.

Solo que al pasar el mouse sobre el div hijo(efecto toogle) este desaparece por que el div padre ya no tiene el mouse sobre el.

Lo que quiero hacer es que aunque el mouse este sobre el div hijo este no desaparesca, que mi el div padre no llame al onmouseout, por que el mouse esta sobre el div hijo que esta dentro del div padre.

[pzin]

Normalmente si tienes el mouse encima del elemento hijo, sigue estando encima del elemento que lo contiene. Ahora, normalmente deja de ocurrir cuando el elemento hijo está posicionado fuera del flujo natural del HTML y por lo tanto deja de ser hijo del elemento padre.

[rogeliomx]

hoooo si esta fuera del flujo el elemento, el hijo tiene la propiedad: position:absolute;

que puedo hacer??

Gracias por la respuesta muy buena por cierto.

[pzin]

La solución depende de qué quieres hacer exactamente. Quiero decir, por un lado puede ser que no necesites posicionar de forma absoluta al hijo, se arreglaría la cosa con algo de CSS y así puedes mantener lo que quieres hacer como lo tienes. En cambio sino queda otra habría que mirar si con jQuery —supongo que usarás jQuery— se pudiera solucionar de otra forma.

[rogeliomx]

si efectivamente uso jQuery y si se puede solucionar con CSS mejor mi estructura esta asi mas omenos

<div id="padre">

<div id="hijo">lo que se esta mostrando</div>


<img src="imagen" >

</div>


el div hijo sale sobre la imagen para eso uso el position:absolute para que al mostrar el div hijo salga por arrbiba de la imagen el div hijo tiene tambien display:none y al usar el toggle de jquery se muestra solo y como el positio esta en absolute se muestra encima del img

[rogeliomx]

y lo que quiero hacer es presisamente lo que ya esta, que el div hijo se muestre al posicionar el mouse sobre el div padre, pero al pasarlo sobre el div hijo que no es hijo que no desaparezca a causa del onmouseout, y claro que salga sobre el img pero dentro del div padre ya que en realidad tengo un menu de div padres, pero haciendolo para uno funciona para todos.

[pzin]

¿Lo tienes subido en algún sitio? Para mirarlo, es que leo y releo y se ve que estoy espeso.

[rogeliomx]

http://tshirtkingdom.16mb.com/

sip.

[pzin]

Si es más fácil solucionarlo con CSS y yo descartaría usar jQuery.

La idea es darle un ancho fijo al elemento A. También podría hacerse con otro elemento, pero bueno. A tendría una posición relativa, y un elemento SPAN una posición absoluta, un left negativo que sea igual al ancho que tenga SPAN. Para el movimiento, habría que poner a SPAN el atributo transition.

Luego con un a:hover span se le da a left un valor de 0.

Código HTML:

<a href="/playera">
  <img src="playera.png">
  <span>100€</span>
</a>
 

Código CSS:

a {
  position: relative;
  display: block;
  width: 200px;
  overflow: hidden; /* para ocultar el precio */
}
 
span {
  position: absolute;
  top: 0;
  left: -80px;
  display: block;
  width: 80px;
  transition: left .5s ease;
}
 
a:hover span {
  left: 0;
}
 

He puesto un ejemplo funcional aquí: http://jsfiddle.net/AZbfa/

[rogeliomx]

jeje muchisimas gracias quedo muy bien y muchisimo mejor. =)