Heim >Web-Frontend >CSS-Tutorial >Wie ändere ich ein Bild beim Schweben mit CSS?
Wie ändere ich ein Bild beim Schweben mit CSS?
- 王林nach vorne
- 2023-09-01 10:05:111435Durchsuche
Die Pseudoklasse „hover“ wird verwendet, um Stile auszuwählen und auf ein HTML-Element anzuwenden, wenn ein Benutzer mit der Maus darüber fährt
Das Ändern eines Bilds beim Schweben mit CSS ist ein einfacher Vorgang, der der Website eine zusätzliche Ebene der Interaktivität hinzufügen kann. Hier erfahren Sie eine Schritt-für-Schritt-Anleitung zum Ändern eines Bilds beim Schweben mit CSS −
Bereiten Sie die Bilder vor
Der erste Schritt zum Ändern von Bildern beim Hover mithilfe von CSS besteht darin, zwei Bilder zu verwenden, die Sie verwenden möchten: das Standardbild und das Hover-Bild. Stellen Sie sicher, dass beide Bilder auf Ihrer Website gespeichert sind und dass Sie die URL jedes Bildes kennen.
Fügen Sie Standardbilder zu Ihrem HTML hinzu
Verwenden Sie das img-Tag und geben Sie die Quelle (src) des Bildes an. Zum Beispiel -
<img src="Wie ändere ich ein Bild beim Schweben mit CSS?-image.jpg" alt="Wie ändere ich ein Bild beim Schweben mit CSS?">
Fügen Sie eine Hover-Regel in Ihrem CSS hinzu
In der CSS-Datei fügen wir eine Regel hinzu, um das Bild beim Schweben zu ändern. Dies erreichen wir, indem wir auf das div-Tag abzielen und eine :hover-Pseudoklasse angeben
img:hover {
content: url("hover-image.jpg");
}
BeispielHier ist ein Beispiel zum Ändern des Bildes beim Hover mithilfe von CSS.
<html>
<head>
<title>Change Image on Hover in CSS</title>
<style>
body{
text-align:center;
}
div {
width: 250px;
height: 195px;
background:
url("https://www.tutorialspoint.com/dip/images/black_and_white.jpg") norepeat;
display: inline-block;
}
div:hover {
background:
url("https://www.tutorialspoint.com/dip/images/einstein.jpg") no-repeat;
}
</style>
</head>
<body>
<h2>Change Image on Hover Using CSS</h2>
<div class="card"></div>
</body>
</html>
FazitDie Verwendung von CSS zum Ändern von Bildern beim Hover ist eine einfache und effektive Möglichkeit, Ihrer Website zusätzliche Interaktion zu verleihen. Dies ist eine großartige Möglichkeit, ein interaktives Erlebnis für Benutzer zu schaffen, das ihnen hilft, länger auf der Website zu bleiben und ihre Gesamtzufriedenheit zu steigern.
Das obige ist der detaillierte Inhalt vonWie ändere ich ein Bild beim Schweben mit CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!