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

CSS 動的擬似クラス プロパティ: ホバー、アクティブ、フォーカス、特定のコード サンプルが必要です

フロントエンド開発において、CSS は非常に重要なテクノロジです。ページのスタイルとレイアウト。基本的なスタイル設定に加えて、CSS は、ユーザーが要素を操作するときに要素のスタイルを変更できる、ホバー、アクティブ、フォーカスなどのいくつかの動的な疑似クラス プロパティも提供します。この記事では、これら 3 つの動的擬似クラス属性を詳しく紹介し、具体的なコード例を示します。

1. Hover 擬似クラス属性

Hover は、ユーザーが要素の上にマウスを置いたときにトリガーされる擬似クラス属性です。 hover 属性を設定すると、マウスをホバーしたときに要素のスタイルを変更できます。具体的な例を次に示します。

HTML コードは次のとおりです。

<button class="button">悬停我</button>

CSS コードは次のとおりです。

.button {
  background-color: blue;
  color: white;
  padding: 10px;
  border: none;
}

.button:hover {
  background-color: red;
}

上記の例では、ボタン要素を作成しました。初期状態ではボタンの背景色は青、文字は白です。ボタンの上にマウスを置くと、ボタンの背景色が赤に変わります。

2. アクティブな擬似クラス属性

active は、ユーザーが要素をクリックしたときにトリガーされる擬似クラス属性です。 active 属性を設定すると、クリック時の要素のスタイルを変更できます。具体的な例を次に示します。

HTML コードは次のとおりです。

<button class="button">点击我</button>

CSS コードは次のとおりです。

.button {
  background-color: blue;
  color: white;
  padding: 10px;
  border: none;
}

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

上記の例では、ボタン要素を作成しました。初期状態ではボタンの背景色は青、文字は白です。ユーザーがボタンをクリックすると、ボタンの背景色が緑色に変わります。

3. フォーカス擬似クラス属性

focus は、ユーザーが要素にフォーカスを置いたときにトリガーされる擬似クラス属性です。通常、入力ボックスなどのフォーム要素に使用されます。具体的な例を次に示します。

HTML コードは次のとおりです。

<input type="text" class="input">

CSS コードは次のとおりです。

.input {
  border: 1px solid gray;
  padding: 5px;
}

.input:focus {
  border-color: blue;
}

上記の例では、入力ボックス要素を作成しました。初期状態では、下の入力ボックスの枠線の色は灰色です。ユーザーが入力ボックスにフォーカスを置くと、入力ボックスの境界線の色が青に変わります。

ホバー、アクティブ、およびフォーカスの擬似クラス属性は、ユーザーが要素を操作する場合にのみトリガーされるため、ページ スタイルを設計する際にはユーザーの操作習慣を考慮する必要があることに注意してください。

概要:

CSS の動的擬似クラス属性は、要素のスタイルを変更することでユーザー エクスペリエンスを向上させることができます。この記事では、よく使用される 3 つの動的擬似クラス プロパティ (hover、active、focus) について学び、具体的なコード例を示しました。この記事があなたのフロントエンド開発に役立つことを願っています。

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