CODEWITHSUNDEEP
jqueryinternet-explorernestedhover
user173163
user173163

Reputation:

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

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!

Upvotes: 3

Views: 6345

Answers (7)

user173163
user173163

Reputation:

@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"

Upvotes: 5

Tosh
Tosh

Reputation: 1857

The way you can solve it is adding a 1px transparant png as background.

See: IE8: Div hover only works when background color is set, very strange, why?

Upvotes: 1

3Dom
3Dom

Reputation: 805

try this

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

As for IE, boycott the crappy browser and make blogs about its sheer hopelessness until your fingers go numb. That browser is responsible for web designers' time being worth about 33% less than it should be. Just kill it any way you can.

Upvotes: 1

uberboom
uberboom

Reputation: 53

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
    });
}

Upvotes: 0

Aamir Afridi
Aamir Afridi

Reputation: 6411

 $("#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

Upvotes: 1

Jojo
Jojo

Reputation: 348

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.

Upvotes: 0

eveliotc
eveliotc

Reputation: 13323

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');
    }
});

Upvotes: 0

Related Questions