如何实现点击时持久改变按钮样式？

按下按钮选择器

问题：

您遇到想要修改的场景按下按钮以创建明显的视觉反馈时的外观。您尝试使用 :active 伪类，但样式更改仅在您单击并按住按钮时发生。

答案：

而 :active伪类似乎是一个合适的选项，它是专门设计用于在主动按下元素时设置元素的样式的。为了达到您想要的效果，建议使用替代方法。

考虑使用锚元素 而不是 元素。这可能与您最初的要求不完全一致，但如果您无法使用 找到直接解决方案，它会带来额外的可能性：

CSS 代码：

<code class="css">a {
  display: block;
  font-size: 18px;
  border: 2px solid gray;
  border-radius: 100px;
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
}

a:active {
  font-size: 18px;
  border: 2px solid green;
  border-radius: 100px;
  width: 100px;
  height: 100px;
}

a:target {
  font-size: 18px;
  border: 2px solid red;
  border-radius: 100px;
  width: 100px;
  height: 100px;
}</code>

HTML 代码：

<code class="html"><a id="btn" href="#btn">Demo</a></code>

通过这种方法，您现在可以观察以下行为：

• 正常状态：按钮为白色
• 点击时：按钮变绿
• 释放后：按钮变红

以上是如何实现点击时持久改变按钮样式？的详细内容。更多信息请关注PHP中文网其他相关文章！