Wie ändere ich ein Bild beim Schweben mit CSS?-CSS-Tutorial-php.cn

Wie ändere ich ein Bild beim Schweben mit CSS?

王林

Freigeben： 2023-09-01 10:05:11

nach vorne

1433 Leute haben es durchsucht

如何使用 CSS 更改悬停时的图像？

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?">

Nach dem Login kopieren

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");
}

Nach dem Login kopieren

Beispiel

Hier 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>

Nach dem Login kopieren

Fazit

Die 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!