CSS Sprite懸停定位

Question

我正在嘗試構建具有翻轉狀態和每個項目的不同圖標的簡單導航。我爲圖標的開/關狀態使用了3個不同的精靈，除了我無法將圖標自己定位以坐在左邊並與文本對齊之外，我的所有工作都非常棒。現在它們出現在每個列表項的左上角，我希望它們出現在文本的左側。但是當我添加邊距或填充或定位與精靈的螺絲，當翻身時看到整個圖像vs只是我想要的部分。這裏是我的代碼：

<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標記。