Fade in content when mouse moves and is not hovering over a div

I am trying to fade in content when the mouse moves (similar to the way Google's homepage does), however I want to prevent this behaviour if the mouse cursor is hovering over a specific div.

Here's the basics:

$("html").hover(function() {
    $("#navigation, #content").fadeIn("slow");
});

This successfully fades in the content. I have been trying to detect when the cursor is over a certain element but with no effect. This is what I have:

$("html").one("mousemove", function() {
    if (mouseover == false) {
        $("#navigation, #content").fadeIn("slow");
    }
});

var mouseover = false;
$('#hero').mouseenter(function() {
    mouseover = true;
}).mouseleave(function() 开发者_StackOverflow{
    mouseover = false;
});

There may be a better way to accomplish this than what I have here?

Try using jQuery's stopPropagation() method on the mousemove handler on your hero element. That should stop the event from bubbling up to the document level, where it would be handled by your more general function.

Note that I've never done this personally, but my understanding of event bubbling in javascript and the purpose of the stopPropagation() method is that it should do exactly this for you.

Rather than $('html') try $(document) and since this element is hidden, try detecting the x and y of the mouse when its over the element, so if the mouse's x is greater than or equal to the element's x and less than or equal to its width plus its x, and the same logic for the y, show it.

And remember to cancel the event, so use unbind().

Ok so I have this working in Firefox:

var overHero = false;
$('#hero').mouseover(function() {
    overHero = true;
}).mouseleave(function(){
    overHero = false;
});

$('html').mousemove( function() {
    if (overHero == false) {
        $("#navigation, #content").fadeIn("slow");
    }
});

...but it doesn't work in Chrome. Chrome just fades in the #content straight away regardless of whether the mouse is moving or not. If the mouse is over the #hero element though it does not fade in (which is correct).