jquery - 悬停效果保留在 Bootstrap 导航栏上

Question

我有 navbar-fixed-top，它会在滚动后改变颜色，例如 background-color、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

试试这个代码。你会毫无问题地得到你想要达到的目标-

 $(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>