Heim > Web-Frontend > CSS-Tutorial > Hauptteil

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

Linda Hamilton
Freigeben: 2024-11-19 17:38:02
Original
985 Leute haben es durchsucht

How to Easily Change an Image on Click with CSS?

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;
}
Nach dem Login kopieren

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;
}
Nach dem Login kopieren

Beispielcode mit .active-Klasse:

<ul>
  <li><img>
Nach dem Login kopieren

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!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage