mouseenter - jquery: etiquetas anidadas y hover() no funciona en IE

mouseout jquery

Question

Tengo una construcción como esta:

<div id="container">

<span>
   <span></span>
</span>

<span>
   <span></span>
</span>

</div>

Necesito atrapar el evento mouseout del contenedor, así que hice jquery hacer esto:

$("#container").hover('''',function(){ 
alert("Out"); 
});

En Firefox / Opera, solo dispara la función mouseout-function cuando dejas el div (cómo lo quiero).

En IE dispara la función mouseout en cada * -Tag dentro del div que golpea el mouse. (* tal vez es importante, que las etiquetas span también tienen eventos mouseover y out)

Alguien tiene una idea de cómo resolver esto? (La estructura anidada no se puede cambiar debido a un diseño complejo)

thx4 cualquier idea!

Answer 1

Mhhh No tengo IE cerca, pero puedes probar las demostraciones jQuery con mouseout (y demostraciones hover) si funciona bien parece ser un problema con tu código en alguna otra línea ... finalmente puedes trabajar con:

$("#container").hover('''',function()
{
    //Are you sure?
    if($(this).attr(''id'') == ''container'')
    {
        alert(''yup this is container'');
    }
});

Answer 2

Has probado:

$("#container").hover('''',function(){ 
    alert("Out"); 
    return false;
});

o:

$("#container").hover('''',function(e){ 
    if($(e.target).is("#container")){
        alert("Out"); 
        return false;
    }
});

o mejor aún:

$("#container").mouseout(function(e){ 
    if($(e.target).is("#container")){
        alert("Out"); 
        return false;
    }
});

Si solo necesita el mouseout, no hay razón para usar la función de desplazamiento.

Answer 3

 $("#container").hover('''',function(ev){

      alert("Out");
      if( ev.stopPropagation ) { ev.stopPropagation(); } //For ''Good'' browsers
      else { ev.cancelBubble = true; } //For IE

 });

también lea: Evento burbujeo y captura

Answer 4

Tuve un problema similar en IE 6, 7 y 8. Mafka tiene razón, el color de fondo debe configurarse para que funcione. Si no es posible establecer un color de fondo en su "contenedor", aún puede establecer el color de fondo en blanco y establecer la opacidad en 0.

Lo he hecho con el siguiente código JavaScript antes de vincular el evento mouseover en jQuery:

if ($.browser.msie) {
    $("#container").css({
        background: ''#fff'',
        opacity: 0
    });
}

Answer 5

prueba esto

$("#container").mouseleave(function(){ 
alert("Out"); 
});

En cuanto a IE, boicotee el maldito navegador y cree blogs sobre su absoluta desesperanza hasta que sus dedos se vuelvan insensibles. Ese navegador es responsable de que el tiempo de los diseñadores web valga alrededor de un 33% menos de lo que debería ser. Solo mátalo de cualquier forma que puedas.

Answer 6

@evelio: no funcionó, el ID siempre fue "contenedor"

cómo lo resolví (hasta ahora ...):

créalo o no, el atributo background-color del contenedor-div debe establecerse en un color. Todavía estoy bastante sorprendido de este hecho, pero lo probé varias veces y es solo el atributo de color de fondo en el CSS lo que hace que funcione o no.

y: el color # 000000 no funciona, cualquier otro color, incluido el "blanco"

Answer 7

La forma en que puedes resolverlo es agregar un png transparente de 1px como fondo.

Ver: IE8: el hover Div solo funciona cuando se establece el color de fondo, muy extraño, ¿por qué?