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的项目。

希望这有帮助！

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

1 个答案: