按钮颜色变为一半

时间:2017-07-26 20:25:27

标签: twitter-bootstrap

$hashrefs

好的有一个问题。当你悬停按钮时,将一半的颜色变为黑色。当你点击更改的颜色保存时。我怎么解决这个问题?

1 个答案:

答案 0 :(得分:0)

您可以使用解决方案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">
	<div class="row">
		<h1>Site Name</h1>
		<div class="navbar  navbar-inverse">
			<div class="container">
				<div class="navbar-header">
					<button class=" btn btn-primary navbar-toggle" data-toggle="collapse" data-target="#responsive-menu">
						<span class="sr-only">Open Navigation</span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
					</button>
				</div>
				<div class="collapse navbar-collapse" id="responsive-menu">
					<ul class="nav navbar-nav">
						<li><a href="#">Point 1</a></li>
						<li><a href="#">Point 2</a></li>
						<li><a href="#">Point 3</a></li>
						<li><a href="#">Point 4</a></li>
					</ul>
				</div>
			</div>
		</div>
	</div>
</div>
&#13;
&#13;
&#13;