CSS圖片懸停工作水平而不是垂直方向

我目前工作在我的客戶的網站CSS導航系統在http://cjcdigital.net/clients/andrea並且在頂部導航一直工作正常，我無法重新創建包含了社會的垂直側邊欄的滾動效果媒體按鈕。CSS圖片懸停工作水平而不是垂直方向

爲了實現頂部導航影響我隨後在以下步驟： http://www.elated.com/articles/css-rollover-buttons/ 用我的導航元素各自爲堆疊頂部/底部。

然而，對於側面導航，儘管設置圖像：懸停精靈推到左側時，圖像懸停屬性不會在所有的踢。

下面是從頂部導航一些代碼，再下面是代碼形式的側NAV。

#headerMenu {width: 1200px;} 
#headerMenu ul{display: inline;} 
#headerMenu li a{top:334px; position:absolute;} 
#magazine 
{ 
    display: block; 
    width: 112px; 
    height: 17px; 
    background: url("./images/magazine.gif") no-repeat 0 0; 
    left:160px; 

} 

#magazine:hover 
{ 
    background-position: 0 -17px; 
} 

#magazine span 
{ 
    position: absolute; 
    top: -999em; 
}

社會導航

#facebook 
{ 
    display: block; 
    width: 149px; 
    height: 57px; 
    background: url("./images/facebook.gif") no-repeat 0 0; 
} 

#facebook:hover 
{ 
    background-position: -300 0; 
} 

#facebook span 
{ 
    position: absolute; 
    top: -999em; 
}

提前感謝您的任何援助

來源

2012-04-06 theonlylos

嘗試修復頁面上的CSS 404和JS錯誤。 – j08691 2012-04-06 01:44:32

您還沒有指定在你的CSS聲明任何單位#facebook:hover。您可能想要做類似的事情：

#facebook:hover 
{ 
    background-position: -300px 0; 
}

來源

2012-04-06 01:48:03 chrisn

非常感謝！這解決了這個問題。我以前是位揭去，因爲我看到了0 0財產被分配簡寫爲背景圖像的代碼，但我想這並不適用於非零值。從現在開始，我將不惜一切代價避免速記的另一個原因。 – theonlylos 2012-04-06 01:56:18

CSS圖片懸停工作水平而不是垂直方向

回答

相關問題