悬停链接不覆盖导航栏的整个高度

时间：2018-06-07 02:39:03

标签： html css twitter-bootstrap hover navbar

我的悬停链接有背景颜色，但它们并没有掩盖导航栏的整个高度。请帮忙。我尝试了内联块和100％的高度，它没有用。

更新 - 我确实通过下面@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>

2 个答案:

答案 0 :(得分：2)

添加此css 

.navbar-expand-lg .navbar-collapse {
margin: -7px;
}

将现有代码更改为

.navbar-nav > li {
margin-left: 10px;
padding: 33px 5px;
}

答案 1 :(得分：0)

请尝试使用此代码。 

* {
    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%;
	  display: block;
}
.navbar-nav > .active > a,
.navbar-nav > .active > a:hover,
.navbar-nav > .active > a:focus {
    background-color: RGBA(0,0,0,0.4) !important;
    display: block;
}
.navbar-nav > li a:hover,
.navbar-nav > li a:focus {
    background-color: RGBA(0,0,0,0.4) !important;
    transition: .5s;
}
    <!-- Video Background -->
    <div class="background-wrap">
		
        <video id="video-bg-elem" preload="auto" autoplay 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 active">
                  <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>
      <!-- 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">
   
    <!-- 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>

相关问题
最新问题