CSS 動的擬似クラス プロパティの調査: ホバー、アクティブ、フォーカス

CSS 動的擬似クラス プロパティの探索: ホバー、アクティブ、フォーカス

はじめに:
CSS 動的擬似クラス プロパティは、対話性を構築するための重要なツールです。そしてダイナミックなエフェクト。その中で、hover、active、focus が最もよく使用される 3 つの疑似クラス属性です。この記事では、これら 3 つの疑似クラス属性の使用法を詳しく紹介し、具体的なコード例を示します。

1. hover 擬似クラス属性:
   hover 擬似クラス属性は、マウスが要素上にあるときのスタイルを指定するために使用されます。一般的なアプリケーションには、リンクの色の変更、非表示のコンテンツの表示などが含まれます。

サンプル コード:

a:hover {
  color: red;
}

.div:hover {
  display: block;
}

上記の例では、マウスがリンク上にあると色が赤に変わり、マウスが .div 上にあると色が変わります。要素を選択すると、表示されます (元々非表示だった場合)。

2. active 擬似クラス属性:
   active 擬似クラス属性は、マウスを押したときのスタイルを指定するために使用されます。通常は、ボタンを押すエフェクトやリンク クリック エフェクトを作成するために使用されます。

サンプルコード:

.button:active {
  background-color: yellow;
}

a:active {
  color: blue;
}

上の例では、ボタンを押すと背景色が黄色に変わり、リンクをクリックするとリンクの文字色が変わります。青。

3. focus 擬似クラス属性:
   focus 擬似クラス属性は、現在フォーカスされている要素のスタイルを指定するために使用されます。主に、ユーザーが入力しているフィールドをマークするためにフォーム要素で使用されます。

サンプル コード:

input:focus {
  border: 2px solid green;
}

textarea:focus {
  box-shadow: 0 0 5px yellow;
}

上記の例では、入力ボックスにフォーカスが置かれると境界線が緑色に変わり、テキスト フィールドにフォーカスが置かれると黄色のシャドウ効果が表示されます。表示されます。

概要:
CSS の動的擬似クラス プロパティは、インタラクティブ性と動的効果を作成するための重要なツールです。その中で、ホバー、アクティブ、フォーカスが最も一般的な 3 つの擬似クラス プロパティです。これらの疑似クラス属性を合理的に使用することで、マウス操作中やフォーカス状態中のページ要素のスタイル変更を簡単に実現できます。上記の例が、読者の理解を深め、これらの属性を使用して、よりインタラクティブで動的な Web ページ効果を作成するのに役立つことを願っています。

以上がCSS 動的擬似クラス プロパティの調査: ホバー、アクティブ、フォーカスの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。