按钮一半改变颜色

Question

\t <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 

 
\t <!-- Optional theme --> 
 
\t <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> 
 
    <div class="container"> 
 
\t <div class="row"> 
 
\t \t <h1>Site Name</h1> 
 
\t \t <div class="navbar navbar-inverse"> 
 
\t \t \t <div class="container"> 
 
\t \t \t \t <div class="navbar-header"> 
 
\t \t \t \t \t <button class=" btn btn-primary navbar-toggle" data-toggle="collapse" data-target="#responsive-menu"> 
 
\t \t \t \t \t \t <span class="sr-only">Open Navigation</span> 
 
\t \t \t \t \t \t <span class="icon-bar"></span> 
 
\t \t \t \t \t \t <span class="icon-bar"></span> 
 
\t \t \t \t \t \t <span class="icon-bar"></span> 
 
\t \t \t \t \t </button> 
 
\t \t \t \t </div> 
 
\t \t \t \t <div class="collapse navbar-collapse" id="responsive-menu"> 
 
\t \t \t \t \t <ul class="nav navbar-nav"> 
 
\t \t \t \t \t \t <li><a href="#">Point 1</a></li> 
 
\t \t \t \t \t \t <li><a href="#">Point 2</a></li> 
 
\t \t \t \t \t \t <li><a href="#">Point 3</a></li> 
 
\t \t \t \t \t \t <li><a href="#">Point 4</a></li> 
 
\t \t \t \t \t </ul> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t </div> 
 
</div> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
 
    <!-- Latest compiled and minified JavaScript --> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

好有一个question.Whenü悬停按钮改变颜色的一半black.Whenü点击变色saving.How我不能解决这个问题？

Answer 1

在这里，你有一个解决方案去https://jsfiddle.net/gsv9po8f/

.btn-primary:focus, .btn-primary:hover{ 
 
    background-position: 0; 
 
    background-color: rgb(38, 90, 136) !important; 
 
    outline: none !important; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<div class="container"> 
 
\t <div class="row"> 
 
\t \t <h1>Site Name</h1> 
 
\t \t <div class="navbar navbar-inverse"> 
 
\t \t \t <div class="container"> 
 
\t \t \t \t <div class="navbar-header"> 
 
\t \t \t \t \t <button class=" btn btn-primary navbar-toggle" data-toggle="collapse" data-target="#responsive-menu"> 
 
\t \t \t \t \t \t <span class="sr-only">Open Navigation</span> 
 
\t \t \t \t \t \t <span class="icon-bar"></span> 
 
\t \t \t \t \t \t <span class="icon-bar"></span> 
 
\t \t \t \t \t \t <span class="icon-bar"></span> 
 
\t \t \t \t \t </button> 
 
\t \t \t \t </div> 
 
\t \t \t \t <div class="collapse navbar-collapse" id="responsive-menu"> 
 
\t \t \t \t \t <ul class="nav navbar-nav"> 
 
\t \t \t \t \t \t <li><a href="#">Point 1</a></li> 
 
\t \t \t \t \t \t <li><a href="#">Point 2</a></li> 
 
\t \t \t \t \t \t <li><a href="#">Point 3</a></li> 
 
\t \t \t \t \t \t <li><a href="#">Point 4</a></li> 
 
\t \t \t \t \t </ul> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t </div> 
 
</div>