jquery: nested tags and hover() not working in IE

Question

hello folks!

i have a construction like this:

<div id="container">

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

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

</div>

i need to catch the mouseout event of the container, so i made jquery do this:

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

In Firefox / Opera, it only fires the mouseout-function when leaving the div (how I want it).

In IE it fires the mouseout-function at every -Tag inside of the div the mouse hits. (maybe important is, that the span tags have also mouseover and out events)

Anyone has an idea how to solve this? (The nested structure cant be changed because a complex layout)

thx4 any ideas!

Answer 1

Mhhh I don't have IE near but you can try the jQuery mouseout demos (and hover demos) if it works fine seems to be a trouble with your code in some other line... finally you can workaroud it with:

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

Answer 2

holy shit

@evelio: it didnt work, the id was always "container"

how i solved it (so far...):

believe it or not, the attribute background-color of the container-div had to be set in a color. im still quite shocked of this fact but i tryed it several times and its only the background-color attribute in the css that makes it work or not.

and: the color #000000 does not work, any other color does, including "white"

i cant believe this shit, i always hated this browser but this is now to much... i'll continue thinking about it tomorrow

cya & good night

(IE Version 7.0.)

Answer 3

Have you tried:

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

or:

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

or better still:

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

If you only need the mouseout there is no reason to use the hover function.

Answer 4

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

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

 });

also read: Event bubbling and capturing

Answer 5

I had a similar issue in IE 6, 7, and 8. Mafka is right, the background color has to be set to make it work. If it’s not feasible to set a background color on your “container”, you can still set the background color to white and set the opacity to 0.

I’ve done this with the following JavaScript code before binding the mouseover Event in jQuery:

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