javascript - 单击后悬停状态卡在按钮上

Question

我有一个具有两种状态的表单:编辑和可见。当您单击一个图标来编辑表单时，底部的两个按钮(类似于提交)会出现以保存或取消。当我单击它们时，表单会更新(或取消)并且按钮会消失。问题是当我重新打开表单进行编辑(并且按钮再次可见)时，最后一次单击仍然在 Chrome 中应用了悬停状态。

       <div>
          <div class="col-xs-5">
            <button class="btn btn-primary pull-right" ng-click="save(true)">Save</button>
          </div>

          <div class="col-xs-5 cancel-btn">
            <button class="btn btn-primary pull-left" ng-click="cancel()">Cancel</button>
          </div>
        </div>

为简单起见，这里只是取消函数...

   $scope.cancel = function() {
      //set a flag for angular to hide/show editing mode in HTML
      $scope.editMode = false;
   };

Answer 1

如之前的评论 (runTarm) 所述，这是因为按钮处于事件/聚焦状态。

要更改它:

.btn-primary:active,
.btn-primary:focus {
  // place your 'default' styling over here
}

您可能需要更具体地声明您的声明，因为我发布的内容将覆盖所有具有 btn-primary 类的元素。

希望对您有所帮助!