html - CSS 在鼠标悬停时添加内嵌底部边框

Question

我的老板要我修改菜单 - 它是由图像组成的，现在他要我用 CSS 来做按钮。我创建了按钮，但现在我需要在鼠标悬停时更改它们，如图所示:

现在，我真的不是设计师，我更愿意从事服务器端的工作，但我需要这样做。我创建的按钮代码是:

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

我怎样才能得到这种效果？

Answer 1

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/

这是如何工作的:

悬停时，您可以根据要应用的边框大小减少填充底部(以像素为单位)。

---

奖金 - 过渡

如果你想添加 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/