我的老闆讓我修改菜單 - 它是由圖像製成的，現在他希望我用CSS來做按鈕。我創建的按鈕，但現在我需要改變他們的鼠標懸停在圖像：CSS在鼠標懸停上添加一個內嵌底部邊框

Normal On mouseover

現在，我真的不是一個設計師，我在服務器端的東西而工作，但我需要這樣做..我創建的按鈕的代碼是：

a { 
    text-transform:none; 
    color:#F1EFED; 
    padding:10px; 
    background-color: #84c225; 
}

我該如何得到這種效果？

來源

2013-07-16 Bujanca Mihai

是否可以改變你的html？ – Kasyx

是的，沒有問題 –

爲什麼要更改HTML？ – Jared

a { 
    text-transform:none; 
    text-decoration:none; 
    color:#F1EFED; 
    padding: 10px; 
    background-color: #84c225; 
} 
a:hover { 
    padding-bottom: 4px; 
    border-bottom: 6px solid #97e127; 
}

http://jsfiddle.net/jTC9C/1/

這是如何工作：

懸停時，您要應用邊框的尺寸減小填充，底部（PX）。

獎金 - 過渡

如果你想添加一個CSS3過渡，你要分割邊界的定義，並使用border-bottom-width代替，因爲你不能動畫複合聲明：

a { 
    text-transform:none; 
    text-decoration:none; 
    color:#F1EFED; 
    padding: 10px; 
    background-color: #84c225; 
    transition: all 0.3s; 
    border-bottom: 0px solid #97e127; 
} 
a:hover { 
    padding-bottom: 4px; 
    border-bottom-width: 6px; 
}

http://jsfiddle.net/jTC9C/2/

來源

2013-07-16 09:03:16

是的，聰明的思維！謝謝 –

如果您想添加轉換，請更新答案。 –

a:hover{ 
    box-shadow: inset 0 -5px 0 0 lightgreen 
}

演示：http://jsfiddle.net/xPHCd/

您還需要添加其他瀏覽器特定規則（例如， -moz-box-shadow）

來源

2013-07-16 09:04:08 Prisoner

我正要評論有關供應商的特定前綴。你很幸運，編輯得這麼快。 :)使用CSS3 +1。 – Jared

[FF13之後不支持-moz-box-shadow]（https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow），所以在技術上你不需要它，但我認爲可以安全回落。 – Xareyo

@YaMo，我知道。但人們仍然使用 Prisoner

CSS在鼠標懸停上添加一個內嵌底部邊框

回答

獎金 - 過渡

相關問題