JavaScript - Problemas con onmouseout entre capas

   
Vista:

Problemas con onmouseout entre capas

Publicado por Kike (1 intervención) el 13/11/2007 12:11:44
Hola,

me estoy volviendo loco con este problema, a ver si me podeis ayudar.

Tengo una capa que al pasar sobre ella muestra otra capa flotante (la llamaré "capa1") cuyo contenido son dos capas.

"capa1" tiene un onmouseout. Al salir con el puntero de "capa1" se ejecuta el onmouseout, todo perfecto, el problema es que al pasar con el puntero de una capa a otra de las que contiene "capa1", tambien salta el onmouseout. ¿como es posible esto? ¿que estoy haciendo mal? Me ocurre con IE6 y Firefox2

Os dejo el codigo:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
 
.hov { width:250px; height:250px; top:300px; left:300px; position:absolute; display:none; z-index:100}
.hov .div1 { width:250px; height:125px; float:left; background:green}
.hov .div2 { width:250px; height:125px; float:left; background:red}
 
</style>
</head>
 
<body>
 
<div id="cHover1" class="hov" onmouseout="alert('fuera');">
	<div class="div1">aa</div>
    <div class="div2">bb</div>
</div>
<div id="cFoto1" onmouseover="document.getElementById('cHover1').style.display='block';" style="width:200px; height:200px; margin:20px; background:yellow">Pasa por<br /> encima de mi</div>
 
</body>
 
</html>

Gracias de antemano.

Un saludo
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder

Problemas con onmouseout entre capas

Publicado por z666zz666z (3 intervenciones) el 29/03/2012 13:40:33
EL problema es que realmente está saliendo de la capa (se va a otro objeto).

Es tema de concepto...

Tú estás pensando en la superficie que delimita la capa
El evento salta al irse el puntero sobre un objeto que no sea la capa

Por ello es normal que al pasar por encima de algo que está dentro de la capa salte el onmouseover.

Lo que has de hacer es detectar si estás dentro del área que delimita la capa... el onmouseover saltará, tú compruebas la posición y si está dentro haces lo que desees y si está fuera haces otra cosa.

El tema es complicado de narices...

Por ejemplo esto funciona (ver nota posterior):
JavaScript:
1
2
3
4
5
6
function Manejador_OnMouseOver(Evento){
  var MiCapa=document.getElementById('ID_DeLaCapa');
  if(MiCapa==(!Evento?window.event.target:Evento.target)){
   // Lo que desees al salirse fuera de la capa por su exterior, ojo ver nota   
  }
}


En el div pones el onmouseout así: onmouseout="JavaScript: Manejador_OnMouseOver(event);"

Nota: Adolece de un problema que intento resolver... el maldito onmouseout también salta al entrar a la capa desde fuera de su perímetro delimitador... por ejemplo si ese manejador es para ocultar la capa... la capa se oculta al entrar a ella si el ratón se mueve despacio, pero no si se mueve rápido... es algo relacionado con el borde (aunque lo tengo a 0px también pasa).

No es nada simple... y mucho menos sin hacks y pasando validación XHTM 1.1 Strict y CSS2.1

Ojala alguien encuentre la solución.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

Problemas con onmouseout entre capas

Publicado por z666zz666z (3 intervenciones) el 29/03/2012 13:51:17
Ya está, localicé al cabrito... era el padding.

La capa en la que esté el onmouseout que no tenga padding y el código que puse funciona sin problemas... al entrar ya no salta el onmouseout.

Caray con las implementaciones...

Porqué saltará el onmouseout cuando hay padding?

Explico cómo poder reproducir el efecto... al poner un padding de 8px... el ratón entra en la capa despacito... entra en la zona que hace de padding y el onmouseout no salta... luego entra en la zona interna y zas salta... si el padding es cero (no hay) ya no salta.

La leche, yo calentándome la oya... es otro maldito fallo de los navegadores.

Si realmente necesitas padding, creo bastaría con el truco de meter otra capa dentro con la que hacer ese padding y listo... así la capa que tiene el onmouseout sigue sin padding... y esa capa de dentro sin borde ni margen... solo padding.

Menos mal que se me ocurrió mover el ratón pixel a pixel... vi que entraba un poco sin saltar y al poco saltó... justo coincidia con el grosor del padding... lo puse a cero y ya no hace ese efecto raro... ya funciona.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

Problemas con onmouseout entre capas

Publicado por z666zz666z (3 intervenciones) el 29/03/2012 13:53:13
A pesar de ser antigua la pregunta, he puesto la respuesta para que el que llegue a ella (como yo acabo de hacer) pueda resolverlo... ya se que la pregunta es de hace cinco años...

La lástima que me da es que nadie en cinco años se la haya contestado.

Lo digo por si alguien se extraña de ver una respuesta pasado tanto tiempo.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

Problemas con onmouseout entre capas

Publicado por Mauricio maue75@hotmail.com (1 intervención) el 03/09/2012 05:39:24
yo he logrado resolverlo de la siguiente manera.


1º tienes una div conteniendo cualquier html. Incluso otras divs.

sobre esa div padre quieres hacer que al irse el mouse se haga hidden.

Lo que hay que hacer es generar otra div,
con la misma dimensión y ubicación que la primera. absolutamente vacía.
Simplemente se colocará por encima de la div 1º.
Y es esta 2º div, la que tiene la condición onmouseout, que llama por ejemplo a una fn que oculte ambas capas.

espero haber sido claro. :)
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar