CSS を使用してクリック時に画像を簡単に変更する方法

クリックで画像を簡単に変更

クリックで画像を変更するのに必要な複雑な JS コードにうんざりしていませんか?疑似セレクターまたは .active クラスを使用して、より単純なソリューションを検討します。

ソリューションを理解する

大規模な JS コードを使用せずにクリック時に画像を変更するには、次を利用できます。テクニック:

• 擬似セレクター: クリック時に要素をターゲットにし、CSS を使用して別の画像でスタイルを設定する擬似セレクターを作成できます。
• .active クラス: クリック時に対象の要素に .active クラスを適用すると、CSS を使用して目的の画像を表示できます。

ソリューションの実装

擬似セレクターの使用:

li:hover img, li:active img {
    display: none;
}

li:hover img#new_image, li:active img#new_image {
    display: block;
}

.active クラスの使用:

1. .active クラスを次の場所に追加します。ターゲット リスト要素: li.active.
2. このクラスの CSS ルールを定義します:

li.active img {
    display: none;
}

li.active img#new_image {
    display: block;
}

.active クラスを使用したコード例:

<ul>
  <li><img>

注: 変更をトリガーするには、必ず適切なクリック イベント リスナーを追加するか、インライン onclick 属性を使用してください。

以上がCSS を使用してクリック時に画像を簡単に変更する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。