懸停效果停留在Bootstrap導航欄上

Question

我有navbar-fixed-top ，它在滾動后會更改顏色，例如background-color ， color ， border-color 。

沒有什么腳本可以做到：

 $(document).ready(function(){       
   var scroll_start = 0;
   var startchange = $('#home');
   var offset = startchange.offset();
    if (startchange.length){
   $(document).scroll(function() { 
      scroll_start = $(this).scrollTop();
      if(scroll_start > offset.top) {
          $('.navbar').css('background-color', 'white');
          $('.navbar a').css('color', 'black');
          $('.navbar a').hover(function() {
            $(this).css('border-color', 'black')
          });
       }
       else {
          $('.navbar').css('background-color', 'transparent');
          $('.navbar a').css('color', 'white');
          $('.navbar a').hover(function() {
            $(this).css('border-color', 'white')
          });
          $('.navbar a').css('border-color', 'transparent');   
       }
   });
    }
});

但畢竟，我仍然保持懸停效果。 如果使用鼠標按住導航欄的點，它將顯示一次，但是如果將其刪除，它不會消失。

在這里它看起來像： http : //i.imgur.com/JHGOfJs.png

這是JSFiddle。

邊界並沒有消失。

如何解決？

Answer 1

在您的if塊中，在懸停時添加背景色，但是您需要在丟失的模糊事件中刪除背景色。 無論如何，我建議您使用css3進行相同的操作，這最適合您的情況。

使用css3，與使用jquery時不同，您不必擔心處理模糊事件。

CSS3代碼

.active: hover {
     background-color : black;  
}

Answer 2

試試這個代碼。 您將毫無困難地得到想要達到的目標-

  $(document).ready(function(){ var scroll_start = 0; var startchange = $('#home'); var offset = startchange.offset(); if (startchange.length){ $(document).scroll(function() { scroll_start = $(this).scrollTop(); if(scroll_start > offset.top) { $('.navbar').addClass('onscroll'); } else { $('.navbar').removeClass('onscroll'); } }); } }); 

 html, body { margin: 0; padding: 0; } .container { max-width: 940px; margin: 0 auto; padding: 0; } #home .nav a { color:white; } .nav { margin: 0; padding: 0; } .navbar-custom { color: white; margin-top: 2em; background-color: transparent; border-color: transparent; float: right; height: 70px; } .nav li { color: white; font-family: 'Raleway', sans-serif; font-weight: 100; font-size: 18px; display: inline-block; float: right; margin-right: 10px; text-transform: uppercase; padding-top: 10px; } .nav a { color: white; text-decoration: none; border: 1px solid transparent; border-radius: 5px; transition: background 0.5s; margin-right: 35px; } .nav a:hover { text-decoration: none; border: 1px solid white; border-radius: 5px; } .jumbotron { height: 600px; background-image: url(''); -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-repeat: no-repeat; background-position: center; margin-bottom: 0px; } .span12 { text-align: center } #main { height: 20px; } .navbar.onscroll{ background-color: #fff; } .navbar.onscroll a{ color: #000 !important; } .navbar.onscroll a:hover{ border-color: black; } 

 <link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="home" class="jumbotron"> <div class="container"> <nav class="navbar navbar-inverse navbar-fixed-top navbar-custom"> <div class="container-fluid"> <div> <ul class="nav navbar-nav pull-right"> <li><a href="#touch">Contact</a></li> <li><a href="#testimon">Blog</a></li> <li><a href="#portfolio">Work</a></li> <li><a href="#services">About</a></li> <li><a href="#">Home</a></li> </ul> </div> </div> </nav> <div id="main" class="main"> <h1>h1</h1> <div class="row"> <div class="span12"> <a href="#services">services</a> <p>Aasdasdad<br> Aasdasdad<br> Aasdasdad<br> Aasdasdad<br> Aasdasdad<br> Aasdasdad<br> Aasdasdad<br> Aasdasdad<br> Aasdasdad<br> Aasdasdad<br> Aasdasdad<br> Aasdasdad<br> Aasdasdad<br> Aasdasdad<br> Aasdasdad<br> Aasdasdad<br> Aasdasdad<br> Aasdasdad<br> Aasdasdad<br> Aasdasdad<br> Aasdasdad<br> Aasdasdad<br> Aasdasdad<br> Aasdasdad<br> Aasdasdad<br> Aasdasdad<br> Aasdasdad<br> Aasdasdad<br> Aasdasdad<br> Aasdasdad<br>Aasdasdad<br> Aasdasdad<br> Aasdasdad<br> Aasdasdad<br> Aasdasdad<br> Aasdasdad<br>Aasdasdad<br> Aasdasdad<br> Aasdasdad<br> Aasdasdad<br> Aasdasdad<br> Aasdasdad<br>Aasdasdad<br> Aasdasdad<br> Aasdasdad<br> Aasdasdad<br> Aasdasdad<br> Aasdasdad<br> </p> </div> </div> </div> </div> </div> </div>