Css 输入按钮结合了背景和悬停精灵

你好，我对css精灵有一些误解。我想有一个按钮像贝娄（绿色复选标记悬停）。它就像一个魅力，如果我使用这两个图片结合成一个精灵与背景url和背景位置

抱歉，没有足够的声誉来发布图片

但我的问题是按钮是由背景组成的

我在上面放了一个带复选标记的精灵（错）

但是没有办法做同样的事情，但是使用悬停状态（真复选标记）

我的HTML

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

我的css：为了精灵

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

我的css：用于假复选标记（灰色）

对于悬停css，我什么也没放，因为错误太多了

谢谢大家的建议，或/并让我走上正轨

致意

---

迪米特里

我不太确定我是否理解你的问题，但是你可以做：悬停将你的精灵向上/向下移动

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

所以你所需要的就是一个包含所有相关图像的精灵（我把整个按钮和它的变体放在一个精灵中），然后在需要的时候移动它们..然后你需要一个css类用于非活动按钮，一个用于：hover.这家伙解释得很好

我希望这能有所帮助-否则在以后的问题中，小提琴演示会很好，如果您看到我的答案时，您的问题还没有解决，请制作一个供我查看：）

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

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