CSS：懸停狀態圖像緩存

當我們定義懸停狀態的任何CSS ... &關於懸停狀態我們改變background:url('image path');將此圖像預加載將在元素的第一個懸停下載..如果是這樣那麼如何預裝它......我知道的JavaScript預載圖片..是去上班......CSS：懸停狀態圖像緩存

來源

2010-12-02 Moon

如果你想避免只有你懸停狀態圖片加載它們，而不是預加載它們，爲什麼不創建同時擁有正常和懸停圖像的精靈？這樣，您可以確保所有的懸停狀態圖像都將被加載，同時減少所有請求的開銷。那麼您需要做的唯一的事情就是設置background-position屬性的值。

至於你的第一個問題，我認爲找到答案的最佳方式是使用兩個大圖像（一對壁紙可以工作）並自己測試，儘管我懷疑圖像只會在鼠標在原始圖像上方，因爲那是代碼正在執行的時間。

希望這會有所幫助！

來源

2010-12-02 10:13:08

答案是聽到`：hover`狀態代碼會在鼠標結束時執行，因此`background：url（'image path'）;``會在鼠標被下載後結束＆是的其他人是正確的，使用精靈...但這不是我的問題 – Moon 2010-12-03 11:18:36

你可以使用css sprites

來源

2010-12-02 10:08:37 caspermc

如果你有一個div的高度爲20px，比如說，希望懸停時改變背景圖片，可以使用一個圖像，其中無懸停和懸停圖形，頂部無懸停，懸停圖像在底部。這兩個部分應該是你的div的高度，在這種情況下，20px。然後，將您的CSS background-position首先設置爲0px 0px（左上角）。這是默認設置（無懸停）。

當用戶將鼠標懸停在div上時，請將background-position設置爲0px -20px（20px向上）。這會將背景圖像向上移動20px，顯示sprite的下半部分，即懸停圖形。當鼠標從div中移除時，精靈將回落到原始位置。

CSS：

 
.hoverDiv   /* Normal state */ 
{ 
    background: url('images/img.png'); 
    background-position: 0px 0px; 
} 

.hoverDiv:hover /* Hover state */ 
{ 
    background-position: 0px -20px;  /* Move background up by 20px, hiding the top image */ 
}

如果你有不同高度的div，只是用div的高度改變20px位。

如果你的精靈並排而不是彼此重疊，請使用background-position: -20px 0px;而不是0px -20px;來移動X軸。當然，你也可以積極地移動背景。

希望這有助於

詹姆斯

來源

2010-12-02 10:22:56 Bojangles

最好的事情做的是使用CSS精靈。精靈表是一個大圖像，裏面有很多圖像，這些圖像將在您的網站上使用。有什麼好處？那麼，這意味着只有一個http請求被髮送來下載你的所有圖像。因此，使網站加載速度稍快。

它將真正適用於懸停效果！

使用起來簡單多了，代碼簡單多了。不像JavaScript，有着糟糕的可怕代碼。這很容易學習。基於精靈中圖像的位置。這是一個有用的教程，在Flowdev。這裏有一個例子W3Schools

來源

2010-12-02 13:40:01 ryryan

CSS：懸停狀態圖像緩存

回答

相關問題