css - 输入按钮结合背景和悬停 Sprite

Question

你好我对css sprite有一些误解。我想要一个像下面这样的按钮(将鼠标悬停在绿色复选标记上。如果我将这两张图片组合成一个具有背景 url 和背景位置的 Sprite ，它就像一个魅力。

link to the picture explanation抱歉没有足够的声誉来张贴图片

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

然后我在上面放了一个带有复选标记(false)的 Sprite

但没有办法做同样的事情，但悬停状态(真正的复选标记)

我的 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

.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;}

对于 hover css，我什么也没放，因为有太多错误

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

最好的问候迪米特里

Answer 1

我不太确定我是否理解您的问题，但是您可以将 :hover 向上/向下移动您的 sprite ..

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

所以你所需要的只是一个包含所有相关图像的 Sprite (id 将整个按钮及其变体放在一个 Sprite 中)然后在需要时移动它们..然后你需要一个用于非事件按钮的 css 类，一个用于:徘徊。这个人解释的很好http://line25.com/tutorials/how-to-build-a-simple-button-with-css-image-sprites

我希望这会有所帮助 - 否则在以后的问题中 fiddle 演示会很好，如果你的问题在你看到我的答案时没有得到解决，请制作一个给我看:)