html - 图像 Sprite 正确的间距

Question

我正在尝试使用图像 Sprite 实现简单的翻转。 不幸的是我在将图像设置在中心时遇到了问题。

a 类应该是 26px 宽度和 21px 高度。但 facebook holder 应该有 10px 的填充。如果有人可以查看我的代码，那会很棒吗？

HTML

<div class="holder">

    <div class="facebook-holder">
    <a class="ss facebook" href="https://www.facebook.com/bendaggersdotcom" target="_blank"></a>
    </div>

</div>

CSS

.holder{background:#a8a1a2; height: 50px; width:150px; padding:10px;}

.ss {display:block;height:21px;width:26px;background: url(http://www.bendaggers.com/wp-content/uploads/2013/08/socials.png);margin-left:24px;float:left;
}

.facebook-holder { background:#FFF; max-width:46px; max-height:41px; height:100%;vertical-align:baseline; text-align:center;}
.facebook-holder:hover {background:#3b5998;}
.facebook {width:26px;background-position: 0px center; background-repeat: no-repeat; margin:0px; padding:10px;}
.facebook:hover {background-position:-26px; padding:10px;}

查看实际效果: http://jsfiddle.net/bendaggers/qQFVV/

我要复制的是: http://readwrite.com/2013/08/29/it-has-been-a-bad-summer-for-apples-ios-7#_tid=popular-feed&_tact=click+%3A+A&_tval=2&_tlbl=Position%3A+2(注意到屏幕右侧的共享按钮了吗？是的，没错!)

顺便说一句，如果这会让您更轻松，请随时修改所有内容。

非常感谢!

Answer 1

您试图在悬停时更改太多属性。

非悬停状态的属性需要是

  display:block;
  height:21px; width:26px;
  border:10px solid #FFF;
  background: #FFF url(http://www.bendaggers.com/wp-content/uploads/2013/08/socials.png) no-repeat;}

然后您只需更改鼠标悬停时 Sprite 的背景颜色和背景位置即可。

  border-color: #3b5998;
  background-color: #3b5998;

所以 facebook 图标的特定样式不过是

.facebook {
  background-position: 0 center; }
.facebook:hover {
  background-position: -26px center;}

查看更新的 fiddle :http://jsfiddle.net/qQFVV/1/