3

何らかの理由でこれを機能させるのに問題があります。

使用したいアイコンシートは次のとおりです。ここに画像の説明を入力

私の問題は、<li>アイテムとアイテムの両方の幅と高さを設定しようとしても<a>、25x25px のアイコンが表示されないことです<a>。もちろん取り除くつもりです！）

私が間違っていることを教えていただけますか？ありがとうございました！

これは私のコードと問題を示すjsfiddleです。

または、以下の私のコードを見ることができます：

html:

<div id="connect">
                <h4>Stay Connected</h4>

                    <ul class="icons">
                    <li><a  class="blogger" href="#blogger">a</a></li>
                    <li><a class="linkdin" href="#linkd">b</a></li>
                    <li><a class="facebook"  href="#facebook">c</a></li>
                    <li><a class="twitter" href="#twit">d</a></li>
                   </ul>
            </div>

CSS:

#connect ul.icons{list-style: none;}
        #connect ul.icons li{
             width: 25px;
            height: 25px;
        }
        #connect ul.icons li a {
            width: 25px;
            height: 25px;
            background-color: red;
            background-image: url('../IMG/iconset.gif');
        }
            #connect li a.blogger{background-position:100px 0px; }
            #connect li a:hover.blogger{background-position:100px 25px;}
            #connect li a.linkdin{background-position:50px 0px;}
            #connect li a:hover.linkdin{background-position:50px 25px;}
            #connect li a.facebook{background-position:25px 0px;}
            #connect li a:hover.facebook{background-position:25px 25px;}
            #connect li a.twitter{background-position:75px 0px;}
            #connect li a:hover.twitter{background-position:75px 25px;}
4

5 に答える 5

5

a要素を作成する必要がありますdisplay:block。

于 2012-08-29T12:38:35.227 に答える
3

ここでjsfiddleを更新しました：

http://jsfiddle.net/YXeuf/

display: ブロックをアンカー タグに追加し、代わりにホバリング用のクラスを li に追加する必要がありました。また、テキストを中央に配置し、テキストを垂直方向にも中央に配置するために行の高さを追加しました。

于 2012-08-29T12:45:07.833 に答える
2

これを試してください：http://jsfiddle.net/hunter/ubguy/14/

あなたのli aスタイリングをしましたdisplay: block;

また:hover、クラスの前ではなく、クラスの後にスタイルを指定してください

#connect li a.blogger:hover

text-index: -9999px画面上のテキストを非表示にするために使用することもできます

#connect ul.icons li a {
    text-indent: -9999px;
    background-image: url('http://c3it.webuda.com/IMG/iconset.gif');
    width: 25px;
    height: 25px;
    display: block;
}

#connect li a.blogger{background-position:25px 0px; }
#connect li a.blogger:hover{background-position:25px 25px;}

#connect li a.linkdin{background-position:75px 0px;}
#connect li a.linkdin:hover{background-position:75px 25px;}

#connect li a.facebook{background-position:100px 0px;}
#connect li a.facebook:hover{background-position:100px 25px;}

#connect li a.twitter{background-position:50px 0px;}
#connect li a.twitter:hover{background-position:50px 25px;}
于 2012-08-29T12:39:58.237 に答える
0

CSS スプライト手法の一般的な使用法については、A List Apart の次の 2 つの記事を強くお勧めします。

CSS スプライト: イメージ スライスのキス オブ デス

2 番目の部分では、スプライトを javascript (jquery) と組み合わせて使用​​します。

CSS Sprites2 - JavaScript の時間です

他にもたくさんあると思いますが、私の意見では、これらの 2 つは本当に読む価値があります。

于 2012-08-29T12:59:17.950 に答える
0

なぜあなたはこれを試してみませんか:

http://jsfiddle.net/ubguy/13/

それは私が推測するより良い方法です。

于 2012-08-29T12:50:29.533 に答える