Question

有一个简单的水平菜单。我希望当你悬停一个按钮时效果，按钮上的文字必须移动到顶部一点。问题是我使用“填充”来设置按钮的大小。附：悬停按钮时会产生效果：按钮必须在顶部变大。

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

你的意思是this吗？

将文字换入<a></a>范围内<a><span>Text here</span></a>

在css中为<span></span> position:relative提供#header-menu a:hover span当悬停时（false.bar）给它一个负顶部偏移量以便在li中移动

希望这有帮助！

Answer 2

您可以通过如下设置列表样式来实现类似的功能：

#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: 0.6em 0.6em 1.4em 0.6em;

工作小提琴here。而且您不需要更改HTML中的任何内容（！）

将鼠标悬停在块

HTML

CSS

2 个答案: