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または、タグごとに2つの画像を使用して、でそれらを交換することもできますhover。

別の方法として、タグa span内に配置し、aタグではなくその上に背景を設定する方法がありますa。

于 2012-07-29T15:33:43.807 に答える