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/

这是如何工作的:

在悬停时,您将填充底部(以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/

Answer 2

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

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

您还需要添加其他浏览器特定规则（例如 -moz-box-shadow）