0

我正在尝试构建一个简单的导航，该导航具有翻转状态和每个项目的不同图标。我为图标的开/关状态使用了 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;
}
4

1 回答 1

1

你不能真正做你想做的事a sprite。唯一的方法是将项目真正隔开，sprite以便您看不到精灵的其他元素。

或者，您可以每个a标签只使用两个图像并将它们交换到hover.

您可以这样做的另一种方法是放置a span在a标签内并在标签上而不是a标签上设置背景。

于 2012-07-29T15:33:43.807 回答