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

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
}

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

希望这可以帮助 ！