:target 疑似クラスを使用して、ボタンが押された後にボタンの外観を変更する方法

「押された」ボタン セレクター

ボタンが押された後にボタンの外観を変更することを目的とする場合、従来の :active セレクターでは不十分な場合があります。 。このセレクターは、ボタンが物理的に押された場合にのみトリガーされます。

目的の機能を実現するための別のアプローチは、:target 疑似クラスを利用することです。このクラスは、対応するアンカー ポイント (この場合は #btn) がターゲットになったときにアクティブになります。

実装:

を置き換えます。 タグを含むタグ:

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

ログイン後にコピー

:active および :target 疑似クラスを組み込むように 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>

ログイン後にコピー

この実装では、ボタンは最初に表示されます通常の状態（白）です。クリックすると緑色（アクティブ状態）に変わります。ボタンを放すと赤色の状態(ターゲット状態)に切り替わります。

以上が:target 疑似クラスを使用して、ボタンが押された後にボタンの外観を変更する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。