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

尝试在hero元素上的mousemove处理程序中使用jQuery的stopPropagation()方法。这应该可以阻止事件冒泡到文档级别，在那里它将由更一般的功能处理。

请注意，我从未亲自完成此操作，但我对javascript中事件冒泡的理解以及stopPropagation()方法的目的是它应该为您完成此操作。

Answer 2

而不是$（'html'）尝试$（文档）并且由于隐藏了这个元素，尝试在元素上方检测鼠标的x和y，所以如果鼠标的x大于或等于element的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元素上，虽然它没有淡入（这是正确的）。

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

3 个答案: