變化圖像時懸停，使用CSS

<!DOCTYPE html> 
<html> 
<head> 
<style> 

.main { 
    background-image: url('a.jpg'); 
} 

.main:hover { 
    background-image: url('b.jpg'); 
} 
</style> 

</head> 
<body> 
    <div class="main"> 
    </div> 
</body> 
</html>

當網頁加載完畢後，我A.JPG didnt出現在所有的，因此沒有懸停效果變化圖像時懸停，使用CSS

它說的是錯我的代碼？

http://jsfiddle.net/ZH9EL/6/

來源

2013-07-18 Ryan

我改變了主div的大小和它的工作就好了。再次嘗試您的JSFiddle，看看您是否得到相同的結果。 – GJK

你能告訴我代碼嗎？你所做的改變？ – Ryan

對不起，我顯然不知道如何使用JSFiddle。這裏是：http://jsfiddle.net/ZH9EL/3/ – GJK

沒有什麼是你的代碼錯誤。第一張圖片正在重定向到主網站，因此您沒有加載圖片。您將不得不在本地託管它。我使用了不同的圖像，它的工作原理。

來源

2013-07-18 02:40:54 LUKE

http://jsfiddle.net/fstreamz/BSAmk/ – LUKE

沒有沒有什麼不對您的代碼，它可以工作，但我相信這是冒險使用2幅圖像，如果1沒有加載它不會工作...

你想使用兩個圖像，但如果懸停形象正在長加載或只是不加載在所有它不會很好地工作..

你可能想嘗試阿洛伊斯Mahdal的回答：https://stackoverflow.com/a/19967062/3217130請閱讀他們的答覆..

你的CSS應該是這樣的：

 <style> 
     #main { 
      width: **Yoor-width-in-pixels**.px; height: **Yoor-heigth-in-pixels**px; 
      background: url('a-b.jpg') no-repeat left top; 
     } 
     #main:hover { background-position: -Yoor-negative-width-in-pixelspx 0px } 
     </style>

這會工作，將加載正常，並在同一時間徘徊所以你不會面對問題與DNS或服務器延遲和其他問題，可以使頁面看起來難看，如果不加載圖像...

請嘗試Alois Mahdal的答案，如果你不知道如何爲你的圖片創建這個圖片（ab.jpg和新的更小但更好的代碼），那麼這將對你有用，那麼我想告訴你如何做到這一點你的圖像和類以及你需要的結果..我用Paint .NET創建精靈，或者我使用spriteme.org優化運行網站上的CSS，你可以複製新的CSS和圖像，如果你使用spriteme.org他們將b e在飛行中創建。有很多方法可以創建或編輯圖片很多的...

我希望我的回答對您有所幫助你，

快樂編碼

來源

2014-05-08 22:42:21 jagb

你可以使用完整的http地址來映像或./ab.jpg以確保圖像的路徑是正確的.. – jagb

變化圖像時懸停，使用CSS

回答

相關問題