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

你为什么不试试这个：

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

我想这是更好的方式。

于 2012-08-29T12:50:29.533 回答
0

对于 css sprite 技术的一般用法，强烈推荐A List Apart中的这两篇文章：

CSS Sprites：图像切片的死亡之吻

第二部分结合使用精灵和javascript（jquery）

CSS Sprites2 - JavaScript 时间到了

我知道还有很多其他的，但在我看来，这两本书真的很值得一读。

于 2012-08-29T12:59:17.950 回答