当鼠标移动且未悬停在 div 上时淡入内容

Question

我试图在鼠标移动时淡入内容（类似于 Google 主页的方式），但是如果鼠标光标悬停在特定 div 上，我想防止这种行为。

基础知识如下：

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

这成功地淡入了内容。我一直在尝试检测光标何时位于某个元素上，但没有效果。这就是我所拥有的：

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

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

可能有比我这里所拥有的更好的方法来完成此任务吗？

Answer 1

尝试在 herostopPropagation() 方法> 元素。这应该会阻止事件冒泡到文档级别，该事件将由更通用的函数处理。

请注意，我个人从未这样做过，但我对 javascript 中的事件冒泡以及 stopPropagation() 方法的目的的理解是，它应该完全为您执行此操作。

Answer 2

而不是 $('html') 尝试 $(document) 并且由于此元素是隐藏的，请尝试检测鼠标悬停在该元素上时的 x 和 y，因此如果鼠标的 x 大于或等于该元素的 x 且小于或等于其宽度加上 x，以及 y 的相同逻辑，显示它。

并记住取消事件，因此使用 unbind()。

Answer 3

好的，我可以在 Firefox 中使用此功能：

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

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

...但它在 Chrome 中不起作用。无论鼠标是否移动，Chrome 都会立即淡入 #content。如果鼠标位于 #hero 元素上，但它不会淡入（这是正确的）。