Jquery: nested tags and hover () do not work in IE

Question

I have a design 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 did jquery:

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

In Firefox / Opera, it only runs the mouseout function when exiting the div (as I want it).

In IE, it runs the mouseout function with every * -Tag inside the div that the mouse hits. (* perhaps it’s important that span tags also have mouseover and out events)

Does anyone have an idea how to solve this? (Nested structure cannot be changed due to complex layout)

thanks4 any ideas!

Answer 1

@evelio: it didn’t work, the identifier was always a “container”

( ...):

, container-div . im , , background-color css .

: # 000000 , , ""

Answer 2

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

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

 });

:

Answer 3

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

IE, , . , - 33% , . .

Answer 4

, 1px png .

: IE8: Div hover , , ?

Answer 5

Mhhh IE , jQuery mouseout demos ( ), - ... , :

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

Answer 6

:

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

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

:

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

, .

Answer 7

IE 6, 7 8. Mafka , , . "", 0.

I did this with the following JavaScript code before binding the mouseover event in jQuery:

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