圖像精靈正確的間距

Question

我想實現使用圖像精靈的簡單的翻轉。 不幸的是我在設置中心圖像時遇到了麻煩。

一個類應該是一個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/