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

Question

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() {
    mouseover = false;
});

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

score 0 · Answer 1 · answered Jan 14 '11 at 20:19

0

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.

answered Jan 14 '11 at 20:19

Kyle Humfeld

1,887
4
23
28

Thanks will have a look at it. I have solved it with a rather clumsy function which I am about to post. – Craig Jan 14 '11 at 20:20

score 0 · Answer 2 · answered Jan 14 '11 at 20:38

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().

score 0 · Answer 3 · edited Jul 26 '16 at 05:41

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).

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

3 Answers3