輸入按鈕結合背景和精靈懸停

Question

你好我對css sprite有一些誤解。我想有一個像波紋管（帶綠色對號懸停一個按鈕，它的工作原理就像一個魅力，如果我使用這2張照片組合成背景url和背景位置的精靈。

link to the picture explanation 遺憾沒有足夠的聲譽張貼圖片

但我的問題是，按鈕由帶有背景

，我把它精靈與對勾（假）

但是沒有辦法做相同，但與懸停狀態（真正的複選標記）

我的HTML

<div class="sprite sprite-novalid"> </div> 
<input type="button" id="cancel" value="Cancel" name="button" onclick="" class="btn" title="Cancel [Alt+X]"> 

我的CSS：對於沒有任何對號

.btn,input[type="button"],.btn{ 
background-color:#ECF1F4; 
background-image:url(http://); 
border-color:#ABC3D7; 
color:#000000} 

.btn, input{ 
border-radius:12px; 
height: 31px; 
width: 180px} 

我的CSS背景按鈕：對於精靈

.sprite { 
background: url(http://); 
no-repeat;} 

我的CSS：爲虛假選中標記（灰色）

.sprite-novalid { 
width: 19px; 
height: 16px; 
background-position: -31px 2px; 
position: absolute; 
display: inline-block; 
bottom: 134px; 
left: 21px;} 

對於懸停CSS，我把什麼因爲有那麼多的錯誤

感謝大家的意見，和/或把我在正確的軌道上。

問候 迪米特里

Answer 1

我不太清楚，我undertand發出，但是你可以：懸停改變你的精靈向上/向下..

.btn:hover{ 
width: 19px: 
height: 16px; 
background-position: ?px ?px; 
/* some other styles you want*/ 
} 

因此，所有你需要的是一個精靈與所有相關圖像（ID使整個按鈕及其變體在一個精靈中），然後在需要時移動它們。然後，您需要一個CSS類用於非活動按鈕，另一個用於：懸停。這傢伙很好地解釋了它http://line25.com/tutorials/how-to-build-a-simple-button-with-css-image-sprites

我希望這會有所幫助 - 否則小提琴演示將是很好的未來的問題，如果你的問題沒有解決的時候你看到我的答案，請讓我看看:)