1

我正在尝试使用图像精灵实现简单的翻转。不幸的是，我无法在中心设置图像。

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 （注意屏幕右侧的分享按钮？是的，没错！）

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

非常感谢！

4

1 回答 1

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/

于 2013-08-31T14:27:55.567 回答