悬停在块内时移动文本

Question

有一个简单的横向菜单。我想在您将鼠标悬停在按钮上时产生效果，按钮上的文字必须稍微移到顶部。问题是我正在使用 "padding" 来设置按钮的大小。 P.S。悬停按钮时有一个效果：按钮必须在顶部变大。

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) 给它一个负的顶部偏移量以在 li[=16] 中向上移动=]

希望对您有所帮助！

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改为：

padding: 0.6em 0.6em 1.4em 0.6em;

工作fiddlehere。而且您不需要更改 HTML (!)

中的任何内容

悬停在块内时移动文本

Moving text when hovering inside block

html

css

menu

padding

HTML

CSS