Wie kann man mit CSS ganz einfach ein Bild per Klick ändern?

Ein Bild per Klick mit Leichtigkeit ändern

Müden Sie den komplexen JS-Code, der erforderlich ist, um ein Bild per Klick zu ändern? Entdecken Sie eine einfachere Lösung mit Pseudo-Selektoren oder der .active-Klasse.

Die Lösung verstehen

Um ein Bild per Klick ohne umfangreichen JS-Code zu ändern, können Sie Folgendes nutzen Techniken:

• Pseudo-Selektoren: Sie können einen Pseudo-Selektor erstellen, der auf Folgendes abzielt Element beim Klicken und formatiert es mit einem anderen Bild mithilfe von CSS.
• .active-Klasse: Durch Anwenden der .active-Klasse auf das Zielelement beim Klicken können Sie CSS verwenden, um das gewünschte anzuzeigen Bild.

Implementierung der Lösung

Verwendung von Pseudo Selektoren:

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

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

Verwenden der .active-Klasse:

1. Fügen Sie die .active-Klasse zum Ziellistenelement hinzu: li.active.
2. Definieren Sie hierfür die CSS-Regel Klasse:

li.active img {
    display: none;
}

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

Beispielcode mit .active-Klasse:

<ul>
  <li><img>

Hinweis: Denken Sie daran, den entsprechenden Klick hinzuzufügen Ereignis-Listener oder verwenden Sie Inline-OnClick-Attribute, um die Änderung auszulösen.

Das obige ist der detaillierte Inhalt vonWie kann man mit CSS ganz einfach ein Bild per Klick ändern?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!