时间戳

首页 > 解决方案 > 单击时转换按钮颜色

html - 单击时转换按钮颜色

问题描述

我希望按钮的颜色在每次单击时都会发生变化。在下面的代码片段中，它从绿色变为蓝色。

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

我认为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>

标签： htmlcss

解决方案

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

:active 应该始终排在最后！

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

我从 W3schools ( https://www.w3schools.com/css/css_pseudo_classes.asp ) 拿了这个：

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

:focus 通常与 :hover 定位类似（因为 hover 仅适用于鼠标）

推荐阅读