单击后悬停状态停留在按钮上答案

【问题标题】：Hover state stuck on buttons after click单击后悬停状态停留在按钮上
【发布时间】：2014-09-16 05:02:36
【问题描述】：

我有一个具有两种状态的表单：正在编辑和可见。当您单击图标编辑表单时，底部的两个按钮（类似于提交）会显示保存或取消。当我单击它们时，表单会更新（或取消）并且按钮会消失。问题是当我重新打开表单进行编辑时（并且按钮再次可见），最后一次点击仍然在 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;
   };

【问题讨论】：

请发布您的完整代码，用于隐藏/显示按钮的 JS 或 CSS 缺失，因此我们无法提供适当的帮助。
小提琴将有助于更好地理解问题。
这可能是活动/聚焦状态，而不是悬停状态。只是猜测。

标签： javascript angularjs css twitter-bootstrap-3 hover

【解决方案1】：

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

改变它：

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

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

希望这会有所帮助！

【讨论】：