Question

我正在尝试使用图片精灵实现简单的翻转。 很遗憾我在将图像设置在中心时遇到了麻烦。

a类的宽度应为26px，高度应为21px。但facebook持有者应该有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;}

然后你只需要在悬停时更改精灵的背景颜色和背景位置。

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

所以facebook图标的具体样式只不过是

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

请参阅更新的小提琴：http://jsfiddle.net/qQFVV/1/

Image Sprites正确的间距

1 个答案: