Question

我希望按钮的颜色在每次单击时都能转变。在下面的代码段中，它从绿色过渡到蓝色。

问题在于，一旦按钮获得焦点，无论单击多少次，颜色都不会改变。要重新启用效果，我必须单击其他位置以使按钮失去焦点。

我以为button:active事件会在每次单击按钮时重置该过程，但事实并非如此。

button {
  background: red;
  color: black;
  height: 50px;
  width: 100px;
}

button:active {
  background: green;
}

button:focus {
  background: blue;
  transition: all 3s ease;
}

<button>Click Me</button>

Answer 1

您也许应该查看伪类（：focus /：active）的顺序

：活动状态应始终排在最后！

有一些关于CSS伪类及其正确使用和顺序的文章。

我是从W3schools（https://www.w3schools.com/css/css_pseudo_classes.asp）那里拿来的：

注意：a：hover必须紧随CSS定义中的a：link和a：之后才能生效！ a：active必须在CSS定义中的a：hover之后才能生效！伪类名称不区分大小写。*

：focus通常与：hover定位相似（因为悬停仅适用于鼠标）

点击时的过渡按钮颜色

1 个答案: