html - cssでスプライトを作る方法

Question

上の写真では、ブログにカーソルを合わせると表示されます

Twitterにカーソルを合わせると表示されます

ウェブサイトの実例

Answer 1

ここでのコツは、画像間のスペースを設定しbackground-position、CSS で の値を設定することです。以下は、前述の Web サイトの実際のスプライトです。

http://www.chaudharygroup.com/templates/cg/images/social-network-icons.jpg

次に、アンカーまたはリスト項目の幅を CSS on で設定できます:hover。

アップデート

言うは易く行うは難しのようですが、期待通りに動作します。以下は、CSS のコード行です。

ul {
    position: relative;
    width: 150px;
    height: 25px;
    display: block;
    margin: 0;
    padding: 0;
    overflow: hidden;
}
ul li {
    display: block;
    float: left;
    margin: 0;
    padding: 0;
}
ul li a {
    background: transparent url('sprite-images.jpg');
    display: block;
    width: 25px;
    height: 25px;
}
ul li:hover {
    position: absolute;
    left: 0;
    top: 0;
    width: 150px;
}
/** Set Width on mouseover. Not only anchor tags has the privilege to
    use the :hover nowadays. **/
ul li:hover a {
    width: 150px;
}

/** These codes below that SOers are trying to tell you. **/
ul li.b a {
    background-position: 0 0;
}
ul li.t a {
    background-position: -29px 0;
}
ul li.f a {
    background-position: -58px 0;
}
ul li.y a {
    background-position: -90px 0;
}
ul li.b:hover a {
    background-position: -173px 0;
}
ul li.t:hover a {
    background-position: -315px 0;
}
ul li.f:hover a {
    background-position: -477px 0;
}

デモ

http://jsfiddle.net/jlratwil/fBDnN/17/