当菜单中的任何链接悬停在整个栏上时,我不知道该怎么做((
这是 css 代码,抱歉,如果它乱七八糟,我是新手。
.nav{
margin: 0;
padding: 0;
text-align: center;
padding-right: 48px;
padding-top: 12px;
}
.nav li{
display: inline;
}
.nav a{
display: inline-block;
padding: 10px;
}
a {
color: #fff;
font: 25px/1 Courier New, monospace;
text-decoration: none;
width: 15%;
vertical-align: middle;
}
a:link {color: #fff; text-decoration: none; font-weight: normal;}
a:visited {color: #fff; text-decoration: none; font-weight: normal;}
a:active {color: #fff; text-decoration: none;}
a:hover {font-family: Courier; color: #600080; text-decoration:none; font-weight: none;text-transform: uppercase; position: sticky;}
a:hover { font-size: 215%; }
最佳答案
问题的原因在这里:
a:hover {
font-size: 215%;
}
随着字体大小的增加,它会使 a
元素变大,从而使您的 li
和 nav
变大。有多种方法可以解决此问题。最简单的方法之一是适应 a
的增长。如果您在悬停时检查该元素,该元素将变为 122px
(在我的示例中)。如果我设置一个 min-height
较大的 a
大小是适应和“转移”不会发生:
a {
min-height: 130px;
}
现在,如果您的链接是动态的或可翻译的,这可能对您不起作用。您可以使用 scale
而不是增加 font-size
这使得元素在不插入其父维度的情况下增长:
a:hover {
transform: scale(2.15);
}
body {
background: #333;
}
.nav {
margin: 0;
padding: 0;
text-align: center;
padding-right: 48px;
padding-top: 12px;
}
.nav li {
display: inline;
}
.nav a {
display: inline-block;
padding: 10px;
}
a {
color: #fff;
font: 25px/1 Courier New, monospace;
text-decoration: none;
width: 15%;
vertical-align: middle;
}
a:link {
color: #fff;
text-decoration: none;
font-weight: normal;
}
a:visited {
color: #fff;
text-decoration: none;
font-weight: normal;
}
a:active {
color: #fff;
text-decoration: none;
}
a:hover {
font-family: Courier;
color: #600080;
text-decoration: none;
font-weight: none;
text-transform: uppercase;
position: sticky;
}
a:hover {
transform: scale(2);
}
<ul class="nav">
<li><a href="">Nav Link One</a></li>
<li><a href="">Nav Link Two</a></li>
<li><a href="">Nav Link Three</a></li>
<li><a href="">Nav Link Four</a></li>
</ul>
关于html - 导航栏在跳跃,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55423027/