html - 悬停在 block 内时移动文本

Question

有一个简单的水平菜单。我想在您将鼠标悬停在按钮上时产生效果，按钮上的文字必须稍微移到顶部。问题是我正在使用“填充”来设置按钮的大小。附言当你悬停一个按钮时有一个效果:按钮必须在顶部变大。

http://jsfiddle.net/e8d3aru1/3/

HTML

<div id="header-menu">
    <ul>
        <li><a href="#">First</a></li>
        <li><a href="#">Second</a></li>
        <li><a href="#">Third</a></li>
        <li><a href="#">Fourth</a></li>
        <li><a href="#">Fifth</a></li>
    </ul>
</div>

CSS

#header-menu {
    margin-left: 31px;
    padding: 7px;   

}

#header-menu li {
    display: inline;
}

#header-menu a {
    text-decoration: none;
    color: white;
    background-color: #ba202f;
    padding: 0.6em 0.6em 1em 0.6em;
    border-radius: 3px; 
    box-shadow: 0 0 10px rgba(0,0,0,0.3);
    transition: padding 0.2s ease;
}

#header-menu a:hover {
    color: #ba202f;
    background: #E8D17E;
    padding: 1em 0.6em 1em 0.6em;
    transition: padding 0.2s ease;
}

Answer 1

您可以通过如下设置列表样式来实现类似的效果:

#header-menu li {
    display: inline;
    position: relative;
    bottom: 0;
    transition: bottom 0.2s ease;
}

#header-menu li:hover {
    bottom: .4em;
    transition: bottom 0.2s ease;
}

并将 a:hover 样式中的 padding 更改为:

padding: 0.6em 0.6em 1.4em 0.6em;

工作 fiddle here .而且您不需要更改 HTML 中的任何内容 (!)