当我只指定click（）jquery时，为什么会发生悬停效果

Question

我有一个奇怪的问题，当我只使用click事件更改按钮颜色时，似乎发生了hover效果并且当我离开时更改按钮颜色按钮。还有什么奇怪的是当我在堆栈中使用这个代码时，它只是在我点击时改变颜色而完全符合我想要的，但是在我的真实环境和这个FIDDLE悬停事件都在触发时。 / p>

基本上可以正常使用Stacks代码片段，但JSFiddle和真实环境不能。

＆＃13;

＆＃13;

	$('.contract_links').click(function() {
	  $(this).toggleClass('btn-default btn-primary');
	})

＆＃13;

	.pointer {
	  cursor: pointer;
	}
  .contract_links {
	  border-radius: 15px;
	  border: solid 1px #cccccc;
	  background-color: #e6e6e6;
	  width: 150px;
	  height: 35px;
	  color: black;
	  line-height: 35px;
	  text-align: center;
	}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="contract_links pointer" id="contract_overview">Contract Overview</div>
<br>
<div class="contract_links pointer" id="asset_covered">Asset Covered</div>
<br>
<div class="contract_links pointer" id="contract_history">Contract History</div>
<br>
<div class="contract_links pointer" id="contract_activites">Contract Activites</div>

＆＃13;

＆＃13;

＆＃13;