垂直導航菜單中使用css精靈的問題

Question

我想創建一個使用CSS精靈的垂直導航菜單。我想在菜單選項滑出一點的地方放一個懸停效果。

a:link { 
    background: url(images/nav.png); 
    background-position: -100px 0px; 
    width: 150px; 
} 

a:hover { 
    background: url(images/nav.png); 
    background-position: -100px 0px; 
    width: 160px; 
} 

所以我使用相同的精靈圖像：a link和a：hover。我只是在增加寬度的情況下：懸停來創建彈出效果。

考慮這個比喻。如果我的選項卡全部在x = 0處對齊，那麼這是我目前的場景。

a:link tab start: x=-100 tab end: x=0 // this is how all links are arranged 
a:hover tab start: x=-110 tab end: x=0 // this is how I want them on hover 
a:hover tab start: x=-100 tab end: x=10 // this is how its panning out 

這裏是我完整的CSS代碼：

#navmenu { 
    left: 100px; 
    margin: 0; 
    padding: 0; 
    position: absolute; 
    top: 150px; 
    width: 150px; 
    z-index: 99; 
} 

#navmenu ul { 
    list-style-type: none; 
    margin: 0px; 
    padding: 0px; 
} 

#navmenu ul li { 
    line-height: 1.5em; 
    padding: 0px; 
} 

#navimenu ul li a { 
    color: black; 
    display: block; 
    font-weight: bold; 
    height: 26px; 
    padding: 0px 15px 0px 0px; 
    text-align: right; 
    width: 150px; 
} 

#navmenu a:link, #navmenu a:visited { 
    background: url(images/nav.png) no-repeat; 
    background-position: -150px 0px; 
    width: 150px; 
} 

#navmenu a:hover { 
    background: url(images/nav.png) no-repeat; 
    background-position: -150px 0px; 
    width: 160px; 
} 

有人可以幫我在這裏？

感謝

Answer 1

好吧，如果你想將它向上或向下移動，那麼你應該改變y位置（即第二），如果你希望它滑向左或向右，你應該改變x位置：

background-position: x y; 

所以，如果我理解正確的話，你要保持左對齊的背景圖像，甚至當你將鼠標懸停在鏈接：

#navmenu a:hover { 
    background: url(images/nav.png) no-repeat -160px 0; 
    width: 160px; 
} 

這就是你想？

順便說一句，你的問題有點模糊。你說圖像的大小是「增加到右邊」（我不知道你的意思，但它涉及到X軸），然後你開始談論「基地」和「頭」 （y軸）