Das Ziel dieses Handbuchs ist es, zu untersuchen, wie man ein Bild beim Hover mit CSS ändert. Fangen wir also an!
Was ist :hover in CSS?
Das :hover ist ein Element der Pseudoklasse, das verwendet wird, um den Zustand von HTML-Elementen zu ändern, wenn eine Maus es auslöst. Dieser CSS-Selektor wird hauptsächlich zum Stylen oder Auswählen von Elementen verwendet. Es kann jedoch nicht auf Links angewendet werden.
Syntax
Die Syntax von :hover ist unten angegeben:
Element : schweben {
CSS-Code. . .
}
Hier, ' Element “ bezieht sich auf das Element, in dem Sie den Hover-Effekt anwenden möchten.
Nun kommen wir zu dem praktischen Beispiel, das Bild beim Hover mit CSS zu ändern.
Beispiel: Wie ändere ich das Bild beim Hover mit CSS?
Um das Bild beim Hover zuerst zu ändern, fügen Sie zwei Bilder im HTML-Abschnitt hinzu. Das erste Bild ist für den aktiven Zustand und das nächste für den Schwebezustand.
Schritt 1: Bilder hinzufügen
Für den angegebenen Zweck fügen wir zwei Bilder hinzu: „ Bild1 ' und ' Bild2 “, und weisen Sie dem zweiten Bild den Klassennamen als „ hover_img “.
HTML
< Karosserie >< div Klasse = 'img' >
< Bild Quelle = 'bild1.png' >
< Bild Quelle = 'image2.png' Klasse = 'hover_img' >
< / div >
< / Karosserie >
Schritt 2: Stylen Sie Bilder
Wechseln Sie nun zum CSS, um die Position beider Bilder festzulegen, indem Sie „ Position ' Eigentum. Wir werden seine Position als „ absolut “, um es absolut in Bezug auf seinen nächsten Elternteil zu positionieren.
CSS
.img {Position : absolut ;
}
Dies zeigt das folgende Ergebnis:
Im nächsten Schritt setzen wir das zweite Bild vor das erste. Dazu setzen wir die Position des Bildes als „ absolut “ und stellen Sie die obere und linke Position als „ 0 “. Die Verwendung dieses Bildes wird vor das erste Bild platziert, aber wir möchten das zweite Bild anzeigen, wenn eine Maus darüber fährt. Setzen Sie also den Anzeigewert auf „ keiner “ zeigt das gewünschte Ergebnis:
.hover_img {Position : absolut ;
oben : 0 ;
links : 0 ;
Anzeige : keiner ;
}
Die Ausgabe des angegebenen Codes ist wie folgt:
Das zweite Bild wird erfolgreich hinter dem ersten Bild versteckt.
Fahren Sie nun mit dem nächsten Schritt fort.
Schritt 3: Bild beim Hover ändern
Verwenden Sie als Nächstes „ :schweben “ und wählen Sie „ .img “, um den Mauszeiger auf das ausgewählte Element anzuwenden. Weisen Sie dann dem zweiten Bild den Klassennamen zu „ .hover_img “. Legen Sie danach innerhalb der Klammern den Wert der Anzeigeeigenschaft als „ in der Reihe “, wodurch das Element gezwungen wird, in dieselbe Zeile zu passen:
.img : schweben .hover_img {Anzeige : in der Reihe ;
}
Hier ist das Ergebnis, das zeigt, dass sich das Bild ändert, wenn der Benutzer den Mauszeiger darauf bewegt:
Die oben angegebene Ausgabe zeigt an, dass wir das Bild beim Hover mithilfe von CSS erfolgreich geändert haben.
Fazit
Das Bild kann beim Hover mit dem „ :schweben ” Pseudo-Klassenelement. Fügen Sie dazu die erforderlichen Bilder in der HTML-Datei hinzu, setzen Sie sie mit CSS an dieselbe Position und wenden Sie den :hover-Selektor darauf an. Infolgedessen ändert sich das erste Bild, wenn Sie mit der Maus darüber fahren. In diesem Artikel haben wir anhand eines praktischen Beispiels erklärt, wie Sie ein Bild beim Hover mithilfe des :hover ändern können.