淡入內容時鼠標移動並沒有懸停在一個div

我試圖在內容上淡出當鼠標移動（類似於谷歌主頁的方式做），但我想阻止這種行爲，如果將鼠標光標懸停在特定的分區。淡入內容時鼠標移動並沒有懸停在一個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; 
});

可能有更好的方法來做到這一點比我這裏？

來源

2011-01-14 Craig

嘗試在您的hero元素的mousemove處理程序上使用jQuery的stopPropagation()方法。這應該阻止事件冒泡到文檔級別，它將由更一般的函數處理。

請注意，我從來沒有親自做過這件事，但是我對JavaScript中事件冒泡的理解以及stopPropagation()方法的用途在於它應該爲您完成此操作。

來源

2011-01-14 20:19:24

謝謝你會看看它。我用一個相當笨拙的功能解決了這個問題，我即將發佈。 – Craig 2011-01-14 20:20:50

而不是$（「HTML」）嘗試$（文件），並且由於這個元件是隱藏的，嘗試檢測所述鼠標的x和y時，其在所述元件，因此，如果鼠標的x是大於或等於元素的x和小於或等於它的寬度加上它的x，以及y的相同邏輯，顯示它。

而且記得要取消該事件，所以使用解除綁定（）。

來源

2011-01-14 20:38:58

好了，所以我在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元素上方，但它不會淡入（這是正確的）。

來源

2011-01-15 15:30:39 Craig

淡入內容時鼠標移動並沒有懸停在一個div

回答

相關問題