[solved] jquery - How to stop mouseout event when hovering over child elements???

[eluser]umbungo[/eluser]
I have some jquery js that is triggered whilst hovering over a DIV. However, this DIV contains an image and link, and if these child elements are hovered over, the mouseout event is triggered?? how do i prevent this?? (there is also a delay involved)

Code:

$(document).ready(function() {
    var hov = '1';
    $('.class').mouseenter(function(){
        hov = '1';
        //do stuff
    });

    $('.class').mouseleave(function(){
        hov = '0';
        setTimeout(function(){
                if(hov=='0'){
                    //undo stuff
                }
        }, 300);
        $('.class').mouseenter(function(){
            clearTimeout();
        });
    });
    
});

edit: this is most noticeable to me on IE6/7. I guess i need some code around the mouseout function saying 'if child, then stop function'.. but i'm not sure how properly to do this??

much thanks to anyone who can help

[eluser]Vheissu[/eluser]
The child elements should be pushing out the div you're hovering, have you got any floated elements inside of the DIV which might not be cleared? And does it have to be mouseenter and mouseleave?

Try this:

Code:

var hov = 1;
$(".class").mouseover(function(){
    clearTimeout();
    hov = 1;
});

$(".class").mouseout(function(){
        hov = 0;
        setTimeout(function(){
                if(hov == 0){
                    //undo stuff
                }
        }, 300);
});

Also noticed you have mouseenter defined twice, the second time you're just calling a function which could have been in your first mouseenter. Try the above code and see if that works. Also integers don't need be in quotes, you can have them without.

Or you could do the above like this:

Code:

var hov = 1;
$(".class").hover(function(){
    clearTimeout();
    hov = 1;
}, function() {
    hov = 0;
    setTimeout(function(){
        if(hov == 0){
            //undo stuff
        }
    }, 300);
});

[eluser]umbungo[/eluser]
Thank you!, your first example works (not sure why). The second causes the same problem as my example. There is still a small bug where a space is removed in IE6/7 but this is not a huge problem nor impossible to patch up i would guess. I was sure i read somewhere that mouseenter/leave was meant to be the more compatable one, obviously not.

Now i just have one significant bug remaining for IE.. posted at http://ellislab.com/forums/viewthread/194893/ would love if you could have a look.