onMouseOut ¡Me vuelve loco!

animalson · #1 (**permalink**) 02/09/2009, 19:02

¡Buenas!

Mi duda de novato es la siguiente:

Ya hace bastante que vengo probando en JavaScript que, al crear ciertos menús que deben aparecer y desaparecer, quiero ocultarlos al quitar el cursor del ratón de encima.

Mi problema radica en que como he aprendido (para mi disgusto) que el evento onMouseOut no sólo se activa al "salir" del objeto actual sino también al pasar por encima de otro objeto que este primero pueda contener dentro.

Entonces: cuando creo ciertas opciones dentro de un DIV que funciona como el menú contenedor, resulta que quiero que el DIV desaparezca al quitar el mouse de encima de el mismo DIV y no al pasar por encima de las opciones que contiene en su interior (ya sea una tabla o simples vínculos).

Espero no haberme hecho mucho lío con esto, pero seguro que ustedes entenderán de qué estoy hablando. Y si no, lo aclararé mejor. Por el momento no se me ocurre otra manera de hacer que ese DIV se oculte al quitar el mouse de encima que no sea con el evento onMouseOut.

Muchas gracias por su ayuda, son una hermosa comunidad de gente que busca ayudar, y eso no tiene precio.

Saludos, Jorge Luis.

zerokilled · #2 (**permalink**) 02/09/2009, 19:20

se de lo que estas hablando porque recuerdo haber tenido un problema similar pero ya se me olvido como era que sucedia. creo que era algo relacionado a donde se define el evento. mira el siguiente cutre ejemplo, intenta pasar el raton por el <span> y veras que aun se muestra.

Código:

<style>
div{
border:1px solid #99C;
background:#EEE;
padding:.5em;
font-family:"trebuchet ms", sans-serif;
}
span{
background:#FFC;
}
</style><div onmouseout="this.firstChild.style.display = 'none';" onmouseover="this.firstChild.style.display = '';"><span style="display:none;">span</span> div</div>

aqui otro ejemplo usando la misma base del anterior, pero esta vez agregando un elemento adicional dentro del <span>.

Código:

</style><div onmouseout="this.firstChild.style.display = 'none';" onmouseover="this.firstChild.style.display = '';"><span style="display:none;" 
onmouseover="this.lastChild.style.display='';" onmouseout="this.lastChild.style.display='none';">span <span style="display:none;">&gt;</span></span> div</div>

muestranos un enlace si tienes tus documentos en linea, sino muestranos el codigo implicado.

animalson · #3 (**permalink**) 02/09/2009, 20:20

¡ Hola zerokilled ! Ante todo gracias por tu respuesta.

Te comento que lo que yo busco es un poco diferente. Aquí te paso el ejemplo:

Código:

<style>
menu{
border:1px solid #99C;
width:200px;
height:200px;
background:#EEE;
position:absolute;
display:none;
}
span{
background:#FFC;
}
</style>

<body>
	<a onclick="document.getElementById('menu').style.display = 'block';">OPCION 1</a>
	<div id='menu' onmouseout="document.getElementById('menu').style.display = 'none';">
		<br />
		<span>MENU 1</span><br />
		<span>MENU 2</span>
	</div>
</body>

Verás que al pasar el cursor sobre las etiquetas que contiene, se dispara el evento.

¿Habrá solución?

Saludos.

zerokilled · #4 (**permalink**) 02/09/2009, 20:40

agregarle el evento onmouseover al <div> para que se mantenga mostrando.

Código:

	<div id='menu' onmouseout="this.style.display = 'none';" onmouseover="this.style.display = '';">

me da vergüenza, no se explicarte el por que sin hacerlo complejo.

animalson · #5 (**permalink**) 02/09/2009, 21:31

Cita:

Iniciado por zerokilled

agregarle el evento onmouseover al <div> para que se mantenga mostrando.

Código:

	<div id='menu' onmouseout="this.style.display = 'none';" onmouseover="this.style.display = '';">

me da vergüenza, no se explicarte el por que sin hacerlo complejo.

¡EUREKA! Perfecto amigo. Ese era el secreto.

Muchas gracias por la ayuda, de verdad.

Un abrazo y hasta pronto.