Question

我已经覆盖了悬停，活动和焦点状态，但是当我点击我的按钮并按住时，我得到另一种颜色（深蓝色），我似乎无法覆盖。是否有一些我不了解的额外按钮状态？

https://jsbin.com/kutavovora/edit?html,css,output

＆＃13;

.btn-primary {
  background: #f00;
  
  &:hover, &:focus, &:active, &.active {
    background: #0f0;
  }
}

＆＃13;

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <a class="btn btn-primary btn-lg">Click and Hold</a>
</body>
</html>

＆＃13;

Answer 1

这种情况正在发生，因为您使用的是Bootstrap，它定义了以下样式：

.btn-primary.active.focus, .btn-primary.active:focus, .btn-primary.active:hover, .btn-primary.focus:active, .btn-primary:active:focus, .btn-primary:active:hover, .open > .dropdown-toggle.btn-primary.focus, .open > .dropdown-toggle.btn-primary:focus, .open > .dropdown-toggle.btn-primary:hover {
    color: #FFF;
    background-color: #204D74;
    border-color: #122B40;
}

修改

如果您想覆盖这些样式，则只需使用更具体的选择器（.btn.btn-primary代替.btn-primary），例如：

.btn.btn-primary { background: #f00; &:hover, &:focus, &:active, &.active { background: #0f0; } }

CSS按钮状态怪异 - 持有点击状态？

1 个答案: