css - CSS Sprites，定位不起作用。

Question

我的 3 个按钮在彼此下方，但是当我将鼠标悬停在浏览器中的图像上时，底部按钮消失了。从顶部开始的按钮是普通按钮、悬停按钮和选择按钮时。任何人都可以帮助使我的按钮与此类似，我使用了此代码，但它仍然无法正常工作。先谢谢了！:D http://www.icondeposit.com/blog:custom-css-button-sprite

按钮：https ://www.dropbox.com/s/j9ecwlgqu8d5508/button-2.png

这是我的CSS代码，

.GoogleMarker {
    width: 1086px;
    height: 1118px;
    background: transparent url(button-2.png) 0 0px no-repeat; /* When not hovered over */
}
.GoogleMarker:hover {
    width: 1086px;
    height: 1118px;
    background: transparent url(button-2.png) 0 -503px no-repeat; /* When hovered over */
}
.GoogleMarker:active {
    width: 1086px;
    height: 1118px;
    background: transparent url(button-2.png) 0 -1004px no-repeat; /* When you press down on the icon or the icon is activated (clicked on) */
}

Answer 1

这是关于您的问题的jsfiddle 文件，我使用在 Internet 上找到的随机图像精灵制作。

只需为精灵设置background-image一次，您无需重复多次。从那时起，您唯一需要确保的是正确的background-position值。每次设置 时background-image，即使您想使用相同的图像，您也会对图像发出另一个请求，这就是我们使用图像精灵的主要目的 - 避免额外的请求。