我的悬停链接有背景颜色，但它们没有覆盖导航栏的整个高度。请帮忙。我尝试过 inline-block 和 100% height，但没有成功。
更新-我确实通过下面 @PizzaBoy 提供的建议解决了这个问题，但现在我坚持使用 .active 背景，看起来和以前一样，每个链接周围都有一个奇怪的半边框/背景。任何使 .active 链接看起来像悬停的建议都会很棒。先谢谢您了。
* {
margin: 0;
padding: 0;
}
body {
font-family: Calibri, sans-serif;
}
.background-wrap {
position: fixed;
width: 100%;
height: 100%;
overflow: hidden;
top: 0;
left: 0;
z-index: -1000;
}
#video-bg-elem {
top: 0;
left: 0;
height: 100%;
width: 100%;
object-fit: cover;
}
.navbar{
background-color: RGBA(0,0,0,0.2) !important;
}
#brand-image{
height: 100px;
}
a.navbar-brand{
position: relative;
}
.navbar{
background-color: RGBA(0,0,0,0.2) !important;
}
.navbar-nav > li{
margin-left:30px;
margin-right:30px;
}
.navbar-nav > li > a{
text-decoration: none;
font-size: 2vh;
font-size: 2.3vw;
font-family: 'Freestyle Script';
font-weight: 900;
color: rgb(210, 21, 84) !important;
padding-bottom: 0.2%;
}
.navbar-nav > li:hover,
.navbar-nav > li:focus {
background-color: RGBA(0,0,0,0.4) !important;
transition: .5s;
}
.navbar-nav > .active > a,
.navbar-nav > .active > a:hover,
.navbar-nav > .active > a:focus {
background-color: RGBA(0,0,0,0.4) !important;
display: inline-block;
}<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="Style.css">
<title>Arks Digital Marketing</title>
</head>
<body>
<!-- Video Background -->
<div class="background-wrap">
<video id="video-bg-elem" preload="auto" autoplay loop="loop" muted="muted">
<source src="video.mp4" type="video/mp4">
Video not supported
</video>
</div>
<!-- Navbar -->
<div class="mynav">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="index.html"></a>
<img id="brand-image" alt="Brand" src="logo.png"</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">
<a class="nav-link" href="#">Services </a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Blogs </a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About Us </a>
</li>
</ul>
</div>
</nav>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>最佳答案
添加这个CSS
.navbar-expand-lg .navbar-collapse {
margin: -7px;
}
将现有代码更改为
.navbar-nav > li {
margin-left: 10px;
padding: 33px 5px;
}
关于html - 悬停链接未覆盖导航栏的整个高度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50732222/