我想让我的导航栏链接有一个黑暗的背景颜色,每当我悬停在他们我的鼠标。它工作正常,但当我改变padding(在本例中为0px)时,它开始 Flink :(全屏查看效果更好)此外,图像链接与其他链接的高度不同(折叠时,它有这个正确的空白空间),并且我无法使用当前的样式规则将其放在同一行中。
**编辑:这是由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>
是什么造成的?我该如何解决?
谢谢
3条答案
按热度按时间v64noz0r1#
Flink 是因为当你悬停时,你正在移除填充,这会将元素从光标下拉出来。然后停止悬停并重新应用填充,将其放回光标下,触发悬停状态。冲洗并重复。
要停止 Flink ,您需要这两种样式一起工作:
如果你想让悬浮的背景占据更少的高度,用边距替换你不想让背景出现的部分。这可能看起来像:
简而言之,不要在悬停时改变框的大小,如果不需要背景,请使用
margin
而不是padding
jjhzyzn02#
悬停中的填充导致问题:
padding: 10px!important;
zlhcx6iw3#
我不知道,这是不是正确的方法,但以这种方式解决这个问题。
//创建一个JavaScript函数
//将id添加到下拉菜单类'idMy'
//在class ='dropdown-item'中调用hideMyDropdwon()函数,每个子项都像onclick=“hideMyDropdwon()”