導航背景按鈕向上懸停

我有這個水平菜單。菜單看起來像標籤，高29px。該圖像在CSS中設置爲<li>背景圖像。而且我還將CSS設置爲懸停。現在我想要的是當我們有一個鼠標，圖像向上移動8px。現在它向下移動。導航背景按鈕向上懸停

CODE：

#nav li { 
    float:left; 
    list-style:none; 
    width:116px; 
    height:29px; 
    background-image:url(images/nav/nav_btn.png); 
    background-repeat:no-repeat; 
    padding-right:10px; 
    text-align:center; 
    padding-top:8px;} 

#nav li:hover { 
    float:left; 
    list-style:none; 
    width:116px; 
    height:37px; 
    background-image:url(images/nav/nav_btn_active.png); 
    background-repeat:no-repeat; 
    padding-right:10px; 
    text-align:center; 
    padding-top:8px; 
    padding-bottom:-8px;} 

<div id="nav"> 
<ul> 
<li>Home</li> 
<li>Home</li> 
<li>Home</li> 
<li>Home</li> 
<li>Home</li> 
<li>Home</li> 
<li>Home</li> 
</ul> 
</div>

來源

2011-11-06 Alexander Vaz

反向的li:hover

padding-top:-8px; 
padding-bottom:8px;

編輯您的填充：不！當然，當我說明以上時，我不知道我的大腦在哪裏。沒有負面的padding這樣的東西。我認爲這是你的願望：

#nav li:hover { 
    float:left; 
    list-style:none; 
    width:116px; 
    height:37px; 
    background-image:url(images/nav/nav_btn_active.png); 
    background-repeat:no-repeat; 
    padding-right:10px; 
    text-align:center; 
    padding-top:8px; 
    padding-bottom:0px; 
    position: relative; 
    top: -8px; 
}

來源

2011-11-06 20:52:40 ScottS

Does'nt work man ..謝謝你的努力。 –

對不起。這不好（這是我沒有真正測試的答案）。看到我編輯的修訂。它應該解決它。 – ScottS

這樣做的工作！謝啦。你是否也有機會知道當你在頁面上時，如何讓1個標籤進入活動狀態。所以，你知道你在哪裏。再次感謝！ –

我可以建議擺脫填充頂部和底部，並使用背景位置，而不是？此外，您實際上並不需要將#nav li中已經定義的規則添加到#nav li:hover中，因爲規則是級聯的。

來源

2011-11-06 22:29:02 shingokko

導航背景按鈕向上懸停

回答

相關問題