Question

我正在尝试构建一个简单的导航，它具有翻转状态和每个项目的不同图标。我正在使用3个不同的精灵来处理图标的开/关状态，除了我无法将图标本身放置在左侧并与文本对齐之外，我一切都工作得很好。现在它们出现在每个列表项的左上角，我希望它们出现在文本的左侧。但是当我添加边距或填充或定位它与精灵螺丝时，当你翻过来时，你会看到整个图像与我想要的部分。这是我的代码：

<div id="navcontainer">
    <ul id="navlist">
        <li><a href="#" class="sub">Subscribe &cent;99/month</a></li>
        <li><a href="#" class="profile">My Profile</a></li>
        <li><a href="#" class="log last">Log Out</a></li>
    </ul>
</div>

#navcontainer  {
    width: 243px;
    height: 200px;
    border: 1px solid #999;
    background-color: #fff;
}

#navcontainer ul  {
    margin: 0;
    padding: 0px;
    list-style-type:  none;
    font-family: 'FranklinGothic-Book', sans-serif;
}

#navcontainer a  {
    display: block;
    padding: 14px 0px 14px 45px;
    width: 198px;
    background-color: #fff;
    border-bottom: 1px solid #eee;
}

#navcontainer a: link, #navlist a:visited {
    color: #000;
    text-decoration: none;
}

#navcontainer a: hover {
    background-color: #cbcbcb;
    color: #000;
}

#navcontainer a.last  {
    border-bottom: 0px;
}

a.sub  {
    display: block;
    width: 20px;
    height: 20px;
    text-decoration: none;
    background: url("http://vpointproductions.com/images/sub.png") no-repeat;
}

a.profile  {
    display: block;
    width: 20px;
    height: 20px;
    text-decoration: none;
    background: url("http://vpointproductions.com/images/profile.png") no-repeat;
}

a.log  {
    display: block;
    width: 20px;
    height: 20px;
    text-decoration: none;
    background: url("http://vpointproductions.com/images/log.png") no-repeat;
}

a.sub: hover, a.profile:hover, a.log:hover  {
    background-position: -20px 0;
}

Answer 1

你无法真正做到a sprite尝试做的事情。唯一的方法是在sprite上真正分隔项目，这样就不会看到精灵的其他元素。

或者，您可以为每个a代码使用两张图片，并在hover上进行交换。

您可以采用的另一种方法是将a span放在a标记内，并在其上设置背景而不是a标记。

CSS Sprite悬停定位

1 个答案: