当菜单中的任何链接都悬停在整个栏上时,我就不知道该怎么做((
这是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/