css - 不悬停时禁用焦点效果

Question

我必须使用 Bootstrap 的 btn 类创建我们自己的按钮。我需要特别覆盖按钮文本的默认颜色。我知道 .button-variant 但我无法使用它(相应的 LESS 文件未包含在元素构建中，我无法进行此类更改)。这是我的 LESS:

.some-company-control(@text-color, @hover-text-color) {
  color: @text-color;

  &:hover,
  &:active {
    color: @hover-text-color;
  }
}

问题是单击按钮后，它会获得默认的 Bootstrap 按钮文本颜色。当我添加 &:focus 时，它会覆盖 Bootstrap 的默认值，但在单击它而不是将其悬停后，它仍然像被单击一样。当按钮仍然聚焦但不再悬停时，我想禁用样式。

感谢大家的建议!

Answer 1

尝试添加这条规则:

    &:focus:not(:hover) {
      color: @text-color;
    }