画像スプライトを使用して単純なロールオーバーを実現しようとしています。残念ながら、画像を中央に設定するのに問題があります。
a クラスは幅 26 ピクセル、高さ 21 ピクセルである必要があります。ただし、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 (画面の右側にある共有ボタンに注目してください。そうです!)
ところで、それがあなたにとってより簡単になるなら、自由にすべてを変更してください。
どうもありがとうございました！