使用css背景圖像翻轉圖像

我已經探索了創建圖像翻轉效果的替代方法（兩種CSS & javascript）。使用css背景圖像翻轉圖像

.main-banner a#link1{ 
    background-image: url(images/yellow-button_03.png); 
    background-repeat: no-repeat; 
    width:310px; 
    height:85px; 
    top:190.2px; 
    left:277px; 
} 

.main-banner a:hover#link1{ 

    background-image: url(images/yellow-button-bright_03.png); 
    background-repeat: no-repeat; 

}

此方法創建與背景圖像的熱點：在這個過程中我一直在使用一個特定的CSS方法遇到不明原因的行爲。鼠標懸停時，圖像將被替換爲具有完全相同尺寸的不同顏色的按鈕。

在第一次鼠標懸停時，由於翻轉圖像僅在第一次初始化時會出現極其輕微的閃爍。該事件只發生在樣式表的第一個緩存之後。

我的問題如下：

鑑於CSS載入中爲什麼會發生這種行爲的發生？

這種行爲會表明css背景翻轉圖像直到最初的鼠標懸停事件才被加載？然而，這種情況並非如此。

請不要提供複製翻轉功能的替代解決方案。這不是問題。

我只想了解爲什麼第一次翻滾時會出現輕微閃爍。謝謝。 a or a#link1選擇之後寫入

來源

2012-08-28 user1526693

is link1 an id？ –

.main-banner a#link1:hover{ 

    background-image: url(images/yellow-button-bright_03.png) no-repeat; 

}

一般僞類，是選擇，所以你應該寫a#link1:hover

結帳這個http://jsfiddle.net/d5RpE/1/

@Tuanderful - 正是因此，在這種情況下，我們可以使用「圖片組合」，所以當第一次：懸停事件將發生 - 圖像將不會波動

來源

2012-08-28 13:30:49 Chandrakant

使用上述方法，波動仍然會發生。我感謝你的回覆，但是，問題仍然沒有得到答覆。我正在尋找「爲什麼」而不是「如何」。 – user1526693

你有沒有使用/嘗試過「圖像刺激」？ – Chandrakant

儘管CSS已完全加載，我不認爲CSS中引用的所有元素直到需要時才加載。換句話說，yellow-button_03.png被加載以在頁面第一次加載時呈現鏈接，但是我相信yellow-button-bright_03.png僅在您將鼠標懸停在鏈接上之後才加載。

來源

2012-08-28 13:47:05 Tuanderful

這是我想到的第一個解釋。我想確保這個解釋是100％正確的。 – user1526693

我通過檢查Chrome中的元素對此進行了驗證。我在www.2uan.com上做了類似的事情;如果您加載頁面並查看開發工具中的資源選項卡，在框架>（2uan.com）>圖片下，在頁面加載時，您會看到加載了一個「social.png」圖片。一旦你將鼠標懸停在頁腳的圖標上，就會看到用'social-hover.png'更新的圖像。我不確定它是否是解決問題的最佳方式，但我可能會將「社交」小精靈與「社交懸停」小精靈相結合，以便在頁面加載時加載它們並擺脫閃爍。 – Tuanderful

使用css背景圖像翻轉圖像

回答

相關問題