So ändern Sie das Bild mit CSS auf Schwebeplätzen

Schwebe ist eine Technik, die ein Zeigegerät verwendet, um mit dem Element zu interagieren. Es kann verwendet werden, um verschiedene CSS -Elemente wie Schaltflächen, Bilder, Menüs und vieles mehr auszuwählen oder zu stylen. Das Anwenden von Schwebe auf ein Element ändert ihren Zustand, wenn eine Maus das angegebene Ereignis auslöst.

Das Ziel dieses Handbuchs ist es zu untersuchen. Also beginnen wir beginnen!

Was ist: Schwebe in CSS?

Der: Hover ist ein Element der Pseudoklasse, mit der der Zustand der HTML-Elemente geändert wird, wenn eine Maus sie auslöst. Dieser CSS -Selektor wird in erster Linie verwendet, um Elemente zu stylen oder auszuwählen. Es kann jedoch nicht auf Links angewendet werden.

Syntax

Die Syntax von: Hover ist unten angegeben:

Element: Hover
CSS -Code…

Hier, "Element”Bezieht sich auf das Element, in dem Sie den Schwebeffekt anwenden möchten.

Jetzt wechseln wir zum praktischen Beispiel, um das Bild mit CSS mit CSS zu ändern.

Beispiel: So ändern Sie das Bild mit CSS auf Schwebeplätzen?

Fügen Sie zuerst das Bild auf Schwebede zu ändern, um zwei Bilder im HTML -Abschnitt hinzuzufügen. Das erste Bild ist für den aktiven Zustand, und das nächste ist für den Schwebezustand.

Schritt 1: Bilder hinzufügen

Für den angegebenen Zweck werden wir zwei Bilder hinzufügen. “Bild1" Und "Bild2”, Und weisen Sie den Klassennamen dem zweiten Bild als" zu "zu" zu "Hover_img”.

Html

Schritt 2: Stilbilder

Gehen Sie nun zu dem CSS, um die Position beider Bilder mit „mit“ festzulegenPosition" Eigentum. Wir werden seine Position als "festlegen"absolutUm es absolut in Bezug auf seinen engsten Elternteil zu positionieren.

CSS

.img
Position: absolut;

Dies zeigt das folgende Ergebnis:

Im nächsten Schritt setzen wir das zweite Bild vor dem ersten. Dazu setzen wir die Position des Bildes als "absolut"Und stellen Sie die obere und linke Position als" ein "0”. Die Verwendung dieses Bildes wird vor dem ersten Bild platziert, aber wir möchten das zweite Bild anzeigen, wenn eine Maus darauf schwebt. Setzen Sie also den Anzeigewert als "keiner”Wird das gewünschte Ergebnis zeigen:

.hover_img
Position: absolut;
Top: 0;
links: 0;
Anzeige: Keine;

Die Ausgabe des angegebenen Codes lautet wie folgt:

Das zweite Bild ist erfolgreich hinter dem ersten Bild versteckt.

Wechseln Sie nun zum nächsten Schritt.

Schritt 3: Das Bild auf dem Schwebedruck ändern

Als nächstes verwenden Sie “:schweben"Und wählen Sie".img”Schwebe auf das ausgewählte Element anwenden. Zuweisen Sie dann den Klassennamen des zweiten Bildes “.Hover_img”. Setzen Sie danach in den Klammern den Wert der Anzeigeeigenschaft als “im EinklangDas wird das Element dazu zwingen, in die gleiche Zeile zu passen:

.IMG: Schwebe .hover_img
Anzeige: Inline;

Hier ist das Ergebnis, das zeigt, dass das Bild geändert wird, wenn der Benutzer darauf schwebt:

Die oben gegebene Ausgabe zeigt an, dass wir das Bild mit CSS erfolgreich geändert haben.

Abschluss

Das Bild kann beim Schwebewechsel mit der “geändert werden:schweben”Pseudo-Klasse-Element. Fügen Sie dazu die erforderlichen Bilder in die HTML -Datei hinzu, legen Sie sie mit CSS in derselben Position ein und wenden Sie den: Hover -Selektor auf sie an. Infolgedessen ändert sich das erste Bild, wenn Sie darüber schweben. In diesem Artikel haben wir erklärt.