在mouseover和mouseout上閃爍的圖像

你好，我有一個由div標籤組成的菜單。用戶選擇每個菜單項的圖像和鼠標懸停在菜單上時應用的一個附加圖像（懸停狀態）。在mouseover和mouseout上閃爍的圖像

問題是，在鼠標和鼠標上圖像閃爍，用戶體驗不理想。

請記住，用戶上傳每個菜單項1的照片默認爲1，懸停狀態爲1。

我該如何擺脫閃爍？

菜單項的html：

<div class="help-context-box" style="background: url(http://domain.com/c/document_library/get_file?uuid=db77cbf4-6ae8-42ec-bb07-36cbde8ab82a&amp;groupId=10180) no-repeat left top;" onmouseover="this.style.background=' url(/c/document_library/get_file?uuid=bd77adc5-54c7-42c8-b39d-f07f1d611ac0&amp;groupId=10180) no-repeat left top'" onmouseout="this.style.background=' url(/c/document_library/get_file?uuid=db77cbf4-6ae8-42ec-bb07-36cbde8ab82a&amp;groupId=10180) no-repeat left top'"></div>

來源

2014-03-05 Syd

哪裏是你的'JavaScript'代碼？ – Pavlo

標籤上沒有額外的js代碼 – Syd

你應該同時顯示兩個 - 一個在另一個之上。隱藏您想要在懸停時顯示的那個，在鼠標懸停時顯示它，並在鼠標離開時再次隱藏它。
下面的例子應該是工作：

  <style> 
      .help-context-box { position:relative; width:100px; height:100px; } 
      .help-context-box img { position:absolute; top:0; left:0; } 
      .help-context-box img:last-child { display:none; } 
      .help-context-box:hover img:last-child { display:inline-block; } 
      </style> 


      <div class="help-context-box"> 
       <img alt="" src="/c/document_library/get_file?uuid=db77cbf4-6ae8-42ec-bb07-36cbde8ab82a&amp;groupId=10180"> 
       <img alt="" src="/c/document_library/get_file?uuid=bd77adc5-54c7-42c8-b39d-f07f1d611ac0&amp;groupId=10180"> 
      </div>

來源

2014-03-05 09:20:57

有一些解決方案，我能想到的：

如果能夠產生兩個圖像的精靈，並簡單地更改懸停時的背景位置，這將消除加載閃爍。
你可以prefetch圖像資源，並堅持您目前的解決方案。
您可以使用兩個標籤代替背景圖像並將它們放置在彼此之上，並且只需將鼠標懸停在菜單項上時隱藏默認（頂部）圖像即可顯示已加載的懸停圖像。

來源

2014-03-05 09:29:39 Houdmont

如果您的股利和圖像大小相同還有另一種選擇：創建一個包含兩個圖像，一個比其他的新形象，並利用CSS的一切。

HTML：

<div class="help-context-box"></div>

CSS：

div.help-context-box { 
    background: url(new_image_url) no-repeat left top; 
} 
div.help-context-box:hover { 
    background-position: left bottom; 
}

來源

2014-03-05 09:35:54 Gil

在mouseover和mouseout上閃爍的圖像

回答

相關問題