每当我将鼠标悬停在它们上面时,我想让导航栏链接的背景颜色变深。它工作正常,但是当我更改填充(在这种情况下为0px)时它开始闪烁:(全屏查看以获得更好的效果) 此外,图像链接与其他链接的高度不同(当折叠时,它具有正确的空白区域),并且我无法使用当前样式规则将其放在同一行中。
**编辑:它是由padding:0px!important
引起的,但那是因为我不希望悬停的背景占据整个高度。如何使高度较低的悬停背景?
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<style>
.navbar {
min-height: 80px;
font-size: 0.8rem;
font-weight:500;
}
.navbar-brand {
padding: 0 15px;
height: 80px;
line-height: 80px;
}
.navbar-toggle {
/* (80px - button height 34px) / 2 = 23px */
margin-top: 23px;
padding: 9px 10px !important;
}
@media (min-width: 768px) {
.navbar-nav > li > a {
/* (80px - line-height of 27px) / 2 = 26.5px */
padding-top: 26.5px;
padding-bottom: 26.5px;
line-height: 27px;
}
}
.bottom-space {
margin-bottom: 20px;
}
#navbar_logged_in > a:link {
color: white ;
}
#navbar_logged_in > a:hover {
opacity:0.7 ;
}
#navbar_logged_in > a:visited {
color: white ;
}
#navbar_logged_in > li.nav-link{
color:white;
}
.nav-pills .nav-link.active, .nav-pills .show > .nav-link{
background-color: #17A2B8;
}
body {
padding-top: 110px;
}
.main-nav a:hover {
background-color: #0D47A1!important;
padding: 0px!important;
}
</style>
<nav id="navbar_logged_in" class="navbar navbar-expand-lg navbar-light bottom-space fixed-top" style="background: linear-gradient(to right, #3399ff , #1a8cff, #0080ff, #0073e6);">
<div class="container">
<a class="navbar-brand mx-auto" href="#">
Logo
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse text-right" id="navbarTogglerDemo02">
<ul class="navbar-nav ml-auto mt-2 mt-lg-0">
<li class="nav-item main-nav">
<a class="nav-link" href="#" style="color:white;margin-right:25px;">
<img class="img-circle" src="Image" alt="Image" width="35" height="35" style="border-radius: 50%!important;">
</a>
</li>
<li class="nav-item main-nav">
<a id="homepage_link" class="nav-link" href="#" style="color:white">Homepage</a>
</li>
<li class="nav-item main-nav">
<a class="nav-link" href="#" style="color:white">About</a>
</li>
<li class="nav-item main-nav">
<a class="nav-link" href="#" style="color:white">Log Out</a>
</li>
</ul>
</div>
</div>
</nav>
是什么造成的?我该如何解决?
由于
答案 0 :(得分:0)
悬停中的填充导致问题:padding: 10px!important;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<style>
.navbar {
min-height: 80px;
font-size: 0.8rem;
font-weight:500;
}
.navbar-brand {
padding: 0 15px;
height: 80px;
line-height: 80px;
}
.navbar-toggle {
/* (80px - button height 34px) / 2 = 23px */
margin-top: 23px;
padding: 9px 10px !important;
}
@media (min-width: 768px) {
.navbar-nav > li > a {
/* (80px - line-height of 27px) / 2 = 26.5px */
padding-top: 26.5px;
padding-bottom: 26.5px;
line-height: 27px;
}
}
.bottom-space {
margin-bottom: 20px;
}
#navbar_logged_in > a:link {
color: white ;
}
#navbar_logged_in > a:hover {
opacity:0.7 ;
}
#navbar_logged_in > a:visited {
color: white ;
}
#navbar_logged_in > li.nav-link{
color:white;
}
.nav-pills .nav-link.active, .nav-pills .show > .nav-link{
background-color: #17A2B8;
}
body {
padding-top: 110px;
}
.main-nav a:hover {
background-color: #0D47A1!important;
}
</style>
<nav id="navbar_logged_in" class="navbar navbar-expand-lg navbar-light bottom-space fixed-top" style="background: linear-gradient(to right, #3399ff , #1a8cff, #0080ff, #0073e6);">
<div class="container">
<a class="navbar-brand mx-auto" href="#">
Logo
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse text-right" id="navbarTogglerDemo02">
<ul class="navbar-nav ml-auto mt-2 mt-lg-0">
<li class="nav-item main-nav">
<a class="nav-link" href="#" style="color:white;margin-right:25px;">
<img class="img-circle" src="Image" alt="Image" width="35" height="35" style="border-radius: 50%!important;">
</a>
</li>
<li class="nav-item main-nav">
<a id="homepage_link" class="nav-link" href="#" style="color:white">Homepage</a>
</li>
<li class="nav-item main-nav">
<a class="nav-link" href="#" style="color:white">About</a>
</li>
<li class="nav-item main-nav">
<a class="nav-link" href="#" style="color:white">Log Out</a>
</li>
</ul>
</div>
</div>
</nav>
答案 1 :(得分:0)
引起闪烁是因为当您悬停时,您正在移除填充,从而将元素从光标下方拉出。然后停止悬停并重新应用填充,将其放回光标下方,触发悬停状态。冲洗并重复。
要停止闪烁,您需要这两种样式一起工作:
@media (min-width: 768px) {
.navbar-nav > li > a {
padding-top: 26.5px;
padding-bottom: 26.5px;
line-height: 27px;
}
}
.main-nav a:hover {
background-color: #0D47A1!important;
padding: 0px!important;
}
如果您希望悬停背景占用更少的高度,请用边距替换您不想要背景的部分。这可能看起来像:
@media (min-width: 768px) {
.navbar-nav > li > a {
padding: 6.5px 8px; /* top/bottom, sides */
margin: 20px 0px;
line-height: 27px;
}
}
.main-nav a:hover {
background-color: #0D47A1!important;
}
简而言之,不要在悬停时更改您的包装尺寸,如果您不想要背景,请使用margin
代替padding