如何在單擊而不是按住時更改按鈕樣式？

按下按鈕選擇器

使用: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中文網其他相關文章！