Check if mouse is hovering on any object

I have a jQuery animation example here: http://jsfiddle.net/p7Eta/

I would like all the titles to pop out if the mouse is not within the container div at all. I have tried to do something like:

$("#container").mouseout(

     function() {
    //slides spans up
    $('.popup').stop().animate({
        bottom: 0 + 'px'
    });

});

But it does not work with the prior animations. What is the correct way to achi开发者_开发知识库eve this effect?

EDIT: I'd like something similar to this: http://jsfiddle.net/RE3XK/ but on mouseover I'd like the individual span titles to pop up like in the first example instead of having them all dissapear

You mean like this.

Check working example http://jsfiddle.net/p7Eta/8/

Update

$("#slider div.popup").hover(
function() {

    //slides spans up
    $('span', this).animate({
        bottom: 0 + 'px'
    });
}, function() {

    //slides spans down
    $('span', this).animate({
        bottom: '-' + 200 + 'px'
    });
});

$(document).mouseover(
function(e) {
    e.stopPropagation()
    $('#slider div.popup').find(' span').animate({
        bottom: 0
    });
});

Finally, jsFiddle cooperated...

I'm doing something hacky, but it's the only way that I could get it to work. I had to add a .hover class to the currently hovered element, as my code doesn't work properly without it. Just don't look at the code, and it'll look nice!

Here's a working example: http://jsfiddle.net/p7Eta/41/

And the code:

// JavaScript Document

//When div.popup is moused over moused over
$("#slider div.block").hover(

function() {

    //slides spans up
    $(this).addClass('hovered');
    $(this).find('span').stop().animate({
        bottom: '0px'
    });
}, function() {
$(this).removeClass('hovered');
    //slides spans down
    $(this).find('span').stop().animate({
        bottom: '-200px'
    });
});

$('#container').hover(function() {
    $('#slider div.block:not(.hovered) span').animate({
        bottom: '-200px'
    });
}, function() {
    $('#slider div.block span').stop().animate({
        bottom: '0px'
    });
});

My guess is that you're going for something along the lines of this one, am I right? The only issue with the way I tried it, is that the element you're entering on, also slides down (which it shouldn't, I guess).

Or something like this... which actually stops the animations before resetting it. http://jsfiddle.net/NDtMW/

Please clarify what you're asking for. Do you

• want the animations to continuously so they're in constant motion whenever they're not hovered on?
• want them to be at the motion-up state whenever they're not hovered on?

BTW, your original script only works in IE. If you're only concerned with one browser, please say so in the future. IE users are probably the minority on SO.