我正在使用Bootstrap 4并创建了一个简单的导航栏(here is the CodePen)。我的活跃的li看起来像我喜欢的方形橙色背景。然而,当我将鼠标悬停在其他li上时,:悬停的那些并不高。
我希望悬停像活跃的橙色和相同的大小。我已经使用检查员试图找出尺寸来自哪里,但找不到任何改变它的东西。我该如何解决这个问题?
HTML
<header>
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-custom">
<div class="container">
<a class="navbar-brand" href="#"><img src="https://s3.amazonaws.com/listing-naples/assets/listing-naples-logo.png" alt="Listing Naples Team Logo"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Properties</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Property</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Agents</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Agencies</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">News</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pages</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control-sm mr-sm-2 custom-input-sm" type="search" placeholder="MLS Number" aria-label="Search">
</form>
</div><!-- end collapse navbar-collapse div-->
</div><!-- end container div -->
</nav>
</header>
CSS
body {
font-family: 'Source Sans Pro', sans-serif;
}
.navbar-custom {
background-color:#000;
padding: 1.5rem;
}
header li {
padding: .5rem;
margin:0;
}
.navbar-custom .navbar-brand,
.navbar-custom .navbar-text {
color: rgba(255,255,255,.8);
}
/* change the link color */
.navbar-custom .navbar-nav .nav-link {
color: rgba(255, 255, 255, 0.5);
font-weight:400;
font-size: 1rem;
}
/* change the color of active or hovered links */
.navbar-custom .nav-item.active .nav-link,
.navbar-custom .nav-item:focus .nav-link,
.navbar-custom .nav-item:hover .nav-link {
color: white;
background-color: orange;
}
.active {
background-color: orange;
}
从你的CSS代码
.navbar-custom .nav-item:hover .nav-link
你将背景色设置为nav-link
的橙色,这是anchor
标签
虽然这一行
.active {
background-color: orange;
}
设置li
标签的背景颜色
您可以通过删除来解决此问题
.active {
background-color: orange;
}
这将它添加到a
元素
.navbar-custom .nav-item.active .nav-link,
.navbar-custom .nav-item:focus .nav-link,
.navbar-custom .nav-item:hover .nav-link {
color: white;
background-color: orange;
}
这将它添加到li
元素
.active {
background-color: orange;
}
这是因为这段代码
header li {
padding: .5rem;
margin: 0;
}
它将.5 rem的填充设置为块。 在悬停到元素本身时设置您的更改值。有关其他问题,请尝试阅读您正在使用的css库的代码。