点击按钮后，鼠标停留在按钮上

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

正如前面的评论(runtar)中提到的，这是因为按钮处于活动/聚焦状态。

修改:

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

你可能需要更具体地声明你的声明，因为我发布的将覆盖类btn-primary的所有项。