2

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

普通的 鼠标悬停时

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

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

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

4

2 回答 2

5 
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/

这是如何工作的：

在悬停时，您将 padding-bottom（以 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-16T09:03:16.253 回答
5 
a:hover{
  box-shadow: inset 0 -5px 0 0 lightgreen
}

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

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

于 2013-07-16T09:04:08.287 回答