0

ここにこのサイトがあります: http://jamessuske.com/freelance/seasons/

下部にソーシャル メディアのアイコンが表示されます。問題は、マウスをアイコンの上に置いたときにクリックできないことです。マウスを少し左に動かしたときにのみ、何が間違っていたのかわかりません。 :

HTML

<ul class="social-media">
<li class="twitter"><a href="#">&nbsp;</a></li>
<li class="instagram"><a href="#">&nbsp;</a></li>
<li class="facebook"><a href="#">&nbsp;</a></li>
</ul>

CSS

ul.social-media{
    padding-top:30px;
}

ul.social-media li{
    float:left;
    padding-left:5px;
    list-style:none;
}

ul.social-media li.twitter{
    background-image:url(http://jamessuske.com/freelance/seasons/images/social.png);
    background-position-x:0px;
    width:25px;
    height:26px;
}

ul.social-media li.instagram{
    background-image:url(http://jamessuske.com/freelance/seasons/images/social.png);
    background-position-x:-26px;
    width:25px;
    height:26px;
}

ul.social-media li.facebook{
    background-image:url(http://jamessuske.com/freelance/seasons/images/social.png);
    background-position-x:-52px;
    width:25px;
    height:26px;
}

どんな助けでも大歓迎です。ありがとう。

4

3 に答える 3

0

これは、li 要素に設定した padding-left が原因です。

于 2013-07-21T21:27:44.327 に答える
0

おそらく、リンクが非常に小さいためです。これを試して ：

 .social-media a {
    display:block;
    height:100%;
    width:100%;
}

したがって、それらは完全に塗りつぶさ<li>れ、スプライトの上に立ちます。

于 2013-07-21T21:28:30.030 に答える