如何在单击而不是按住时更改按钮样式？

按下按钮选择器

使用 :active 选择器为按钮提供的 CSS 代码不会更改按钮样式，直到单击它并握住。为了达到按钮样式在按下后发生变化的预期效果，需要采用不同的方法。

除了使用仅在单击按钮时触发的 :active 选择器之外，您还可以使用：目标选择器在单击后更改按钮样式。 :target 选择器匹配当前超链接引用的目标元素。

以下是使用锚点 () 标签而不是按钮的示例：

<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>

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

在此示例中，锚标记的 id 为“btn”，并且有一个指向同一 id 的链接。单击链接时，锚标记将成为超链接引用的目标，并且应用 :target 选择器，将按钮样式更改为红色。

以上是如何在单击而不是按住时更改按钮样式？的详细内容。更多信息请关注PHP中文网其他相关文章！