押したままではなくクリックした後にボタンのスタイルを変更するにはどうすればよいですか?

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

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

この例では、アンカー タグには「btn」という ID と同じ ID へのリンクがあります。リンクをクリックすると、アンカー タグがハイパーリンク参照のターゲットになり、:target セレクターが適用されて、ボタンのスタイルが赤に変わります。

以上が押したままではなくクリックした後にボタンのスタイルを変更するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。