悬停时CSS按钮背景消失

Question

我将bootstrap与我自己的CSS能力结合使用，以制作一些不错的网站。我今天遇到这个奇怪的问题，无法弄清楚为什么会发生这种情况。

.container-fluid {
  text-align: center;
}
#toplane {
  color: white;
  /*background-image:  url(citybackground.jpg);
    using a background color due to image not uploaded
  into the net yet*/
  background-color: black;
  background-size: 100% 100%;
  min-height: 370px;
}
#botlane {} #headone {
  margin-top: 130px;
  color: black;
  text-shadow: 0px 0px 12px white, 0px 0px 8px white, 0px 0px 3px white, 0px 0px 5px white;
  font-family: "Times New Roman", Times, monospace;
  font-size: 60px;
}
.buscado {
  color: #595959;
  width: 40px;
  height: 40px;
  border-radius: 18px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- 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>
<link rel="stylesheet" type="text/css" href="wean1.css">
<div class="container-fluid" id="toplane">
  <h1 id="headone">PRICE SURFER FAQ</h1>
  <button class="buscado"><span class="glyphicon glyphicon-search" aria-hidden="true"></span>
  </button>
</div>
<div class="container-fluid" id="botlane">

</div>

在上面链接的代码段中，您可以看到搜索按钮即使没有预期也具有悬停效果。我已经尝试创建一个.buscador:hover来解决它，但我无法改变的事情并不重要我写的是当鼠标悬停在它上面时按钮变得透明。

为什么会这样？

编辑：这是一张图片，上面有我发生的事情（Ubuntu今天不喜欢我截取屏幕截图，对不起图片）：