css圖像滾轉不起作用

我有一個應該顯示幾個按鈕的css圖像滾動。它使用一個圖像作爲'正常'模式，一個用於'懸停'模式，另一個用於'主動'模式。這三個圖像是一個大圖像文件的一部分。我已經在一個不同的項目上實現了這個方法，並且它工作正常，但是對於這個項目我似乎無法獲得翻轉效果。我的代碼如下：css圖像滾轉不起作用

<div class="homealertbox"><h1 class="homealert">The Worlds Best Marketplace For Buying & Selling Websites</h1> 
<div class="addbuttons"> 
    <a href="http://localhost/buy" class="buy"><span class="displace">Buy</span></a> 
    <a href="http://localhost/sell" class="sell"><span class="displace">Sell</span></a> 
</div>

我的CSS低於：

a.buy { 
display: block; 
width: 160px; 
height: 40px; 
float:left; 
background:url('http://localhost/img/buy.png'); 
background-position: 0 0; 
} 

a.buy:hover { 
background:url('http://localhost/img/buy.png'); 
background-position:0 -40px; 
} 

a.buy:active { 
background:url('http://localhost/img/buy.png'); 
background-position:0 -80px; 
} 

.displace { 
position: absolute; 
left: -5000px; 
} 

a.sell { 
display: block; 
width: 160px; 
height: 40px; 
background: url('http://localhost/img/sell.png') 0 0 no-repeat; 
float:right; 
} 

a.sell:hover { 
background: url('http://localhost/img/sell.png') 0 -40px no-repeat; 
} 

a.sell:active { 
background: url('http://localhost/img/sell.png') 0 -80px no-repeat; 
}

我認爲這個問題是與嵌套div標籤做的，但我不能完全肯定。有人可以幫忙嗎？另外，如果代碼沒有在本文中正確格式化，我很抱歉。

來源

2012-10-27 user1779397

做任何圖像的顯示？ –

你沒有關閉你的homealertbox div，除非在按鈕後面關閉更遠？ – DBUK

您的代碼適用於我。我改變了在我的本地機器上測試的唯一情況是CSS圖像背景的URL。我創建了2個圖片，每個圖片有兩個按鈕背景，並分別保存爲sell.png和buy.png。我將CSS中的localhost/...後臺路徑更改爲我保存的位置。檢查您的圖片路徑/網址是否正確，您的圖片在正確的位置有正確的按鈕背景。這些是我的圖像。 My Buy image

Working Demo

來源

2012-10-27 15:20:41 Thanushka

css圖像滾轉不起作用

回答

相關問題