如何自定義導航欄中懸停的大小？

Question

我正在學習引導 我正在嘗試創建一個導航欄，當我們向下滾動時，它會縮小，並且還想讓我在全尺寸的鏈接上進行懸停，但我嘗試了太多但我無法完成。請幫助我使這個導航欄全高度懸停在鏈接上。以下是代碼中，我寫道：

HTML代碼

<nav class="navbar navbar-default navbar-fixed-top"> 
    <div class="container-fluid" id="fullheader"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span>       
     </button> 
     <a class="navbar-brand" href="#">WebSiteName</a> 
    </div> 
    <div> 
     <div class="collapse navbar-collapse navbar-right" id="myNavbar"> 
     <ul class="nav navbar-nav"> 
      <li><a href="#section1">Section 1</a></li> 
      <li><a href="#section2">Section 2</a></li> 
      <li><a href="#section3">Section 3</a></li> 
      <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Section 4 <span class="caret"></span></a> 
      <ul class="dropdown-menu"> 
       <li><a href="#section41">Section 4-1</a></li> 
       <li><a href="#section42">Section 4-2</a></li> 
      </ul> 
      </li> 
     </ul> 
     </div> 
    </div> 
    </div> 
</nav> 

CSS代碼

.navbar{ 
    width: 100%; 
    padding: 40px 0; 
    background-color:#FFf; 
    border-bottom: 1px solid #e1e1e1; 
    /* animation magic */ 
    transition: all 0.4s ease-in-out; 
    -webkit-transition: all 0.4s ease-in-out; 
    -moz-transition: all 0.4s ease-in-out ; 
    z-index: 9999; 
    top: 0; 
    position: fixed; 
    } 

.navbar-default{ 
background-color:#fff !important;} 

.shrink{ 
    padding: 10px 0; 
} 


.navbar-default .navbar-brand{ 
    font-size: 30px; 
    -webkit-transition: all 0.4s ease-out; 
    transition: all 0.4s ease-out; 
} 

.navbar-default .navbar-brand,.navbar-default .navbar-brand:hover{ 
    color: #646464; 
    margin-left: 80px !important; 
} 

.shrink .navbar-brand{ 
    font-size: 20px; 
} 


.navbar-default .navbar-nav>li>a:hover, .navbar-default .navbar-nav>.active>a{ 
    background-color: #00CCFF!important; 
    display:block; 
} 



.navbar-default .navbar-nav>li>a{ 
    color: #FF0000 !important; 
    font-size: 16px; 
    font-weight: 500; 
} 

js代碼

$(document).ready(function(){ 
     $('body').scrollspy({target: ".navbar", offset: 50}); 
     $("#myNavbar a").on('click', function(event) { 
     if (this.hash !== "") { 
      event.preventDefault(); 
      var hash = this.hash; 
      $('html, body').animate({ 
      scrollTop: $(hash).offset().top 
      }, 800, function(){ 
      window.location.hash = hash; 
      }); 
     } 
     }); 
    }); 

$(window).scroll(function(){ 
      $scrol=$(document).scrollTop(); 
      //console.log($scrol); 
      if($scrol > 100){ 
       $(".navbar").addClass("shrink"); 
      } 
      else 
      { 
       $(".navbar").removeClass("shrink"); 
      } 
     }); 

Answer 1

你的意思是這樣的嗎？ codepen.io

.navbar{ 
    width: 100%; 
    background-color:#FFf; 
    border-bottom: 1px solid #e1e1e1; 
    /* animation magic */ 
    transition: all 0.4s ease-in-out; 
    -webkit-transition: all 0.4s ease-in-out; 
    -moz-transition: all 0.4s ease-in-out ; 
    z-index: 9999; 
    top: 0; 
    position: fixed; 
    } 

.navbar-default{ 
background-color:#fff !important; 
min-height: auto;} 

.navbar-default .navbar-nav>li>a { 
    margin: 0 10px; 
    padding: 40px 0; 
    -webkit-transition: all 0.4s ease-in-out; 
    -moz-transition: all 0.4s ease-in-out ; 
} 

.shrink.navbar-default .navbar-nav>li>a, 
.shrink.navbar-default .navbar-brand { 
    padding: 10px 0; 
    height: 40px; 
} 


.navbar-default .navbar-brand{ 
    padding: 40px 0; 
    font-size: 30px; 
    -webkit-transition: all 0.4s ease-out; 
    transition: all 0.4s ease-out; 
    min-height: auto; 
height: auto; 
} 

.navbar-default .navbar-brand,.navbar-default .navbar-brand:hover{ 
    color: #646464; 
    margin-left: 80px !important; 
} 

.shrink .navbar-brand{ 
    font-size: 20px; 
} 



.navbar-default .navbar-nav>li>a:hover, .navbar-default .navbar-nav>.active>a{ 
    background-color: #00CCFF!important; 
    display:block; 
} 



.navbar-default .navbar-nav>li>a{ 
    color: #FF0000 !important; 
    font-size: 16px; 
    font-weight: 500; 
} 

Answer 2

好的，我認爲@尼古拉·科斯托夫的回答在滾動右側縮小了。這是你想要懸停全尺寸，這樣的東西？

body {height: 2000px;} 
.navbar{ 
    width: 100%; 
    background-color:#FFf; 
    border-bottom: 1px solid #e1e1e1; 
    /* animation magic */ 
    transition: all 0.4s ease-in-out; 
    -webkit-transition: all 0.4s ease-in-out; 
    -moz-transition: all 0.4s ease-in-out ; 
    z-index: 9999; 
    top: 0; 
    position: fixed; 
    } 

.navbar-default{ 
background-color:#fff !important; 
min-height: auto;} 

.navbar-default .navbar-nav>li>a { 
    margin: 0 10px; 
    padding: 40px 0; 
    -webkit-transition: all 0.4s ease-in-out; 
    -moz-transition: all 0.4s ease-in-out ; 
} 

.shrink.navbar-default .navbar-nav>li>a, 
.shrink.navbar-default .navbar-brand { 
    padding: 10px 0; 
    height: 40px; 
} 


.navbar-default .navbar-brand{ 
    padding: 40px 0; 
    font-size: 30px; 
    -webkit-transition: all 0.4s ease-out; 
    transition: all 0.4s ease-out; 
    min-height: auto; 
height: auto; 
} 

.navbar-default .navbar-brand,.navbar-default .navbar-brand:hover{ 
    color: #646464; 
    margin-left: 80px !important; 
} 

.shrink .navbar-brand{ 
    font-size: 20px; 
} 



.navbar-default .navbar-nav>li>a:hover, .navbar-default .navbar-nav>.active>a{ 
    background-color: #00CCFF!important; 
    font-size: 30px; 
    display:block; 
} 



.navbar-default .navbar-nav>li>a{ 
    color: #FF0000 !important; 
    font-size: 16px; 
    font-weight: 500; 
}