OnMouseOver閃爍導航

我使用CSS和一點Javascript構建了一個下拉式導航欄。當用戶第一次使用導航時，我遇到了閃爍問題。它在一些瀏覽器上比其他瀏覽器更頻繁（Chrome）發生。這真的很煩人，這是我第一次真正使用任何JavaScript，特別是在導航中的OnMouseOver和OnMouseOut。以下是導航鏈接：http://demo2.reclaimdesign.com/testnav.html。有沒有辦法來解決這個問題？OnMouseOver閃爍導航

感謝， DH

來源

2012-02-05 DH-Designs

我懷疑它可能是圖像沒有被預加載的結果，即：只有在鼠標懸停在它上面時，纔會激活並加載'懸停'狀態圖像。

我會考慮用JavaScript預加載圖像，以便在用戶將鼠標移動到元素上時準備好搖滾，或者（甚至更好）使用精靈來包含所有懸停/非在一張圖像中需要的圖像可以像使用「幻燈片規則」一樣移動CSS以實現同樣的效果。

有很多在計算器上的例子就形象預壓，但這裏的如何可以實現一個例子：

var image_to_preload = new Image(); 
image_to_preload.onload = function(){ // could do something here... }; 
image_to_preload.src = "/path/to/image.jpg";

就像我說的，我寧願使用精靈，我再次懷疑有大量的例子，但作爲你的菜單的例子，這些項目的尺寸看起來像是110 x 35像素，所以如果你創建了一個尺寸爲110 x 70像素的圖像（兩個懸停狀態都推進到一個圖像中），你可以用CSS滑動它：

.menuAllProducts 
{ 
    width: 110px; 
    height: 35px; 
    background-image: url(background-sprite.jpg); 
    background-position: 0px 0px; 
} 

.menuAllProducts:hover 
{ 
    background-position: 0px -35px; 
}

我希望這有助於並且有意義！祝你好運！ :)

來源

2012-02-05 07:12:48

這幫助了很多！非常感謝您的幫助！ – 2012-02-05 07:32:14

由於您使用的圖片，你需要預加載所有圖像和他們側翻同行。

發生「閃爍」是因爲翻轉圖像需要加載。更好的方法是使用一個圖像作爲背景，並使用CSS移動懸停的背景圖像。這就是所謂的「推拉門」。

Here's one link with a tutorial.但是，如果您有Google，則有幾十個。

來源

2012-02-05 07:07:04 Scott

OnMouseOver閃爍導航

回答

相關問題