单击按钮后如何删除悬停/焦点样式？答案

【问题标题】：How to remove hover/focus styling after button click?单击按钮后如何删除悬停/焦点样式？
【发布时间】：2021-07-29 04:07:48
【问题描述】：

我知道，对于可访问性的设计和开发，&:hover 和 &:focus 通常具有相同的样式（鼠标悬停和标签焦点）。但是当我单击、释放并悬停在按钮上时，我遇到了问题，它仍然处于 &:focus 状态。

我认为向 &:active 添加样式可以解决问题，但我意识到它只会影响单击按钮而不是释放按钮的时间。

如果用户单击按钮，是否有办法保持 &:hover 和 &:focus 相同，但焦点样式不会保持不变？我宁愿避免使用 javascript，但如果这是唯一的解决方案，那么我也可以。谢谢。

在演示中，第一个按钮是我现在拥有的。选项卡时当前按钮是正确的，但对于鼠标单击则不正确。第二个演示是我对鼠标单击的期望，但是 Tabbing 不正确。

编辑

button {
  height: 200px;
  width: 200px;
  color: white;
  background-color: green;
  transition: background-color 250ms ease-out;
}

/*button:hover, button:focus {
  background-color: blue;
}

.btn2:focus {
  background-color: green;
}

.btn2:hover {
  background-color: blue;
}*/

button:hover {
  background-color: blue;
}

button:focus:active {
  background-color: blue;
}

<button class="btn1">Current Button Action</button>

<button class="btn2">Expected Button Action</button>

【问题讨论】：

两个按钮是一样的。 :active（和:focus）样式必须在 :hover 样式之后。
@pavel 我更新了样式。你是这个意思吗？

标签： css button hover focus