Mouseover y Mouseout con objetos creados

[salbatore]

Hola foreros!,

Tengo un div de 150px por 150px, cuando te situas en el se crea otro div dentro de el de 150px por 150px por medio de createElement. Es decir:

Código PHP:

  <script>
    function crear()
        {
            bicharraco = document.getElementById('bicho');
                creacion = document.createElement('div');
                creacion.setAttribute("id","logo_shadow");
                creacion.setAttribute("style","width:150px; height:150px; background:red ; ");
                
                bicharraco.appendChild(creacion);
        }
    function eliminar()
        {
            creacion = document.getElementById('logo_shadow');
            var padre = creacion.parentNode;
            padre.removeChild(creacion);
        }
</script>
<div id="bicho" onmouseout="eliminar(this);" onmouseover="crear(this);" style="width:150px; height:150px; background:green ;">
</div> 
  

¿Como puedo hacer para que no se elimine el recuadro creado al ponerme encima de el?¿No es raro si... no he creado correctamente los objetos con DOM... no deberia reconocerlo totalmente?

Estoy perdido... una ayuda?

[jackson666]

Yo no entiendo porque le pasas un parametro a una funcion que no recibe parametros :

Lo que no entiendo es de que recuadro hablas!! Cada vez que pasas el mouse por arriba del div padre, te crea un nuevo elemento y te lo inserta dentro de el...

[salbatore]

Hola,

Ufff... ahora que me releo... me parece que he dado poca informacion, jeje. Si te fijas al situarte encima del "bicho" se crea el elemento. Pero como estas encima del nuevo elemento creado el navegador identifica que te has ido del elemento "bicho" aunque estes en el, y por lo tanto, ejecuta la funcion eliminar.

¿Se entiende?... jeje... es decir... si pruebas ese codigo... el div creado parpadea, ya que se esta creando y eliminando constantemente.

Pues eso es... alguien sabe la razon y solucion para que al situarse encima del nuevo elemento no se ejecute la funcion eliminar?

[jackson666]

Y yo creo que esta a la vista...
Te paras encima del padre y crea un elemento, te alejas y lo borra... Y si es obvio que cuando te vuelvas a parar lo va a crear otra vez....

Podrias poner un contador en la funcion eliminar...

[salbatore]

Hola,

¿Con que navegador lo ves jackson666?... yo con el firefox... ¿No ves como parpadea y practicamente pasa de verde a roja en milisegundos?

[jackson666]

Si, es evidente ese efecto... Ya te explique porque!

Ponele un contador al de eliminar y listo...

[salbatore]

Hola de nuevo jackson666,

¿Como que al eliminar?... es que no quiero que se elimine nunca... solo al salir del elemento "bicho" y de su contenido. Es decir, yo lo que quiero es que solo y solo se elimine el elemento creado al salir de su contenedor... ¿que tiene que ver la funcion eliminar?, jeje... tal vez no me explique bien.

[jackson666]

Iniciado por salbatore

Hola de nuevo jackson666,
...yo lo que quiero es que solo y solo se elimine el elemento creado al salir de su contenedor...

Queres que el elemento creado se elimine al sacar el mouse de su contenedor?

Código HTML:

<!-- este es el contenedor! -->
<div id="bicho" onmouseout="eliminar(this);" onmouseover="crear(this);"> 
    <!-- Este seria el que creas con javascript -->
    <div id="logo_shadow"></div>
</div> 

Claro, lo que esta pasando es que se te superponen los eventos! Voy a ver que puedo hacer...

EDIT: La intencion cual es? Cambiar el color de fondo?

[salbatore]

Hola,

La intencion, jeje... es añadirle sombra a un logotipo por medio de un alpha, jeje... pero la verdad aunque se pudiese hacer de otro modo, que se que se puede simplemente sacando la imagen del contenedor y poniendola debajo con position absolute... tengo especial interes en solucionarlo corrigiendo el problema de los eventos... pues me ocurre con otras funciones algo mas complicadas.

Jeje... me trae de cabeza!... despues de dejar de usar innerHTML... me topo que haciendolo como "se debe" me trae mas errores, jeje...

Asi que estoy abierto a soluciones jeje!

[zerokilled]

se me ocurre que con CSS tambien puedes lograrlo.

Código:

#logo_shadow{
/* otras declaracion para cuando el DIV sea visible */
display:none;
}

#bicho:hover #logo_shadow{
/* declaraciones para cuando el puntero se pose encima del elemento #bicho */
display:block;
}

@edit,
hacia rato que lei este mensaje y olvide cual es el proposito real de la discusion. bueno, basicamente se debe porque el navegador esta constantemente generando eventos. en el caso de los eventos del mouse, mouseover y mouseout constantemente se disparan aunque el raton no abandone un elemento pero se mueve entre sus elementos. es decir, cuando sucede un nuevo mouseover, antes de este debe suceder un mouseout.

[salbatore]

Hola...

Zerokilled no me vale esa solucion... jeje... pues el div que se crea tiene una animacion javascript... ademas de necesitar crearlo, pues en un origen no existe ese div. En definitiva... que con css no me vale el invento, jeje.

El problema de todo es como tu dices la constante ejecuciones de los eventos... ese parpadeo. Lo correcto seria que aunque te situases encima del elemento creado no lo identificara como salir del elemento que lo contiene... es decir... como seria si no lo hubiese creado y hubiese estado todo el rato dentro del contenedor.

Para resumir... lo que deseo es que cuando te situes encima del cuadrado verde se vea el cuadrado rojo y puedas mover el raton encima del cuadrado verde y que no parpadee el rojo. Y debe estar hecho con javascript... con el metodo de crear el elemento dentro del cajon.

¿Sabeis alguna solucion... la verdad es que es un problema que llevo arrastrando desde hace muchas semanas y me esta dando un dolor de cabeza terrible.