试图追踪引导悬停效果的来源

时间:2016-07-26 15:29:21

标签: twitter-bootstrap

我的经理要求我复制头文件通知的Bootstrap实现。我已经复制了html并且我已经映射了css。剩下的一件事就是我不确定关闭按钮的悬停效果来自哪里。我检查了html并使用了Chrome开发工具。有什么想法关闭按钮的悬停效果即将到来以及如何将效果降低到我的本地实现中?

http://getbootstrap.com/javascript/#alerts

1 个答案:

答案 0 :(得分:0)

.close类的悬停规则位于 bootstrap.css 文件的第5851行:

警报悬停CSS 请参阅dist/css/bootstrap.css

的第5851行
.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
  filter: alpha(opacity=50);
  opacity: .5;
}

工作示例: 悬停/焦点颜色和不透明度已更改。



button.close:hover,
button.close:focus {
  color: #f00;
  opacity: 1;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="alert alert-warning alert-dismissible" role="alert">
  <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span>
  </button>
  <strong>Warning!</strong> Better check yourself, you're not looking too good.
</div>
<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.6/js/bootstrap.min.js"></script>
&#13;
&#13;
&#13;