In CSS werden verschiedene Arten von Cursorn für verschiedene HTML-Elemente verwendet, und um die Art des Cursors zu ändern, das „ Mauszeiger ”-Eigenschaft verwendet wird. Es erlaubt Ihnen, den Cursortyp zu ändern und den Wert des Cursors einzustellen, den Sie auf dem Bildschirm anzeigen möchten. Als zusätzliche Funktion können Sie auch Ihr eigenes Cursorbild festlegen.

In diesem Leitfaden erfahren Sie:

• Was ist die CSS-Eigenschaft des Cursors?
• So ändern Sie den Cursor beim Hover mit CSS in ein Bild

So lass uns anfangen!

Was ist die CSS-Eigenschaft „Cursor“?

Um das Erscheinungsbild der Maus über einem HTML-Element zu steuern, muss das „ Mauszeiger ”-Eigenschaft von CSS verwendet werden. Es ermöglicht das Ändern des regulären Cursors in verschiedene Typen wie Kopiercursor, Handzeiger, Greifen und viele mehr. Sie können auch Ihren eigenen benutzerdefinierten Cursor festlegen, indem Sie die URL des Bilds in der Cursoreigenschaft festlegen.

Syntax

Die Syntax der Cursor-Eigenschaft lautet wie folgt:

Weisen Sie in der oben angegebenen Syntax den Pfad des Bildes im „ URL() “, die Sie auf dem Bildschirm anzeigen möchten.

Wir werden nun zu dem Beispiel übergehen, um den normalen Cursor beim Schweben in ein Bild zu ändern.

Wie ändere ich den Cursor beim Hover mit CSS in ein Bild?

Um den Cursor beim Hover in ein Bild zu ändern, fügen Sie zuerst ein Element in HTML hinzu.

Beispiel 1: Ändern des Cursors in ein Bild beim Hover mithilfe der Cursor-Eigenschaft

Wir erstellen eine Überschrift

und einen Schaltflächenklassennamen „ btn “.

HTML

< Karosserie >
< h1 > Ändern Sie den Cursor beim Hover in Bild h1 >
< Taste Klasse = 'btn' > Klick mich Taste >
Karosserie >

Derzeit wird beim Bewegen der Maus über die Schaltfläche der Standardcursor angezeigt:

Wechseln Sie nun zum CSS und ändern Sie den Cursor auf das Bild.

Legen Sie dann den Pfad des Bildes im „ URL() “. Beispielsweise haben wir „i mit.svg “ als unser ausgewähltes Bild. Legen Sie dann den Wert der Cursoreigenschaft als „ Auto “.

CSS

.btn {
Cursor: URL ( icon.svg ) , automatisch;
Polsterung: 10px;
}

Speichern Sie den obigen Code und führen Sie die HTML-Datei aus, um das folgende Ergebnis zu sehen:

Die angegebene Ausgabe zeigt an, dass der Cursor beim Schweben erfolgreich in ein Bild geändert wurde.

Notiz: „ Auto ” wird als alternative Option in der Cursoreigenschaft verwendet; Wenn das Bild nicht geladen wird oder der Dateipfad oder die Datei selbst fehlt, wird aufgrund des automatischen Werts das Standardsymbol auf dem Bildschirm angezeigt.

Beispiel 2: Festlegen des Standard-Cursors beim Schweben

Zum Beispiel geben wir die URL des Bildes an und setzen nur den Wert der Cursor-Eigenschaft auf „ Auto “:

Cursor: URL ( ) , automatisch;

Daher ändert sich der Cursor nicht, wenn er mit der Maus über die Schaltfläche bewegt wird:

Beispiel 3: Bildalternative beim Hover festlegen

Anstelle von auto können Sie andere Werte des Cursors einstellen, die Sie alternativ zum Bild anzeigen möchten. Zum Beispiel ändern wir den Wert der Cursor-Eigenschaft von „ Auto ' zu ' Zeiger “:

Cursor: URL ( ) , Zeiger;

Wie Sie in der folgenden Ausgabe sehen können, wird der Cursor in einen Handzeiger geändert, wenn er über der Schaltfläche schwebt:

Wir haben die einfachste Methode zum Ändern des Cursorbildes beim Hover mit CSS bereitgestellt.

Fazit

In CSS können Sie den Cursor mit dem „ Mauszeiger ' Eigentum. Es ermöglicht das Ändern eines normalen Cursors zu einem Bild durch Zuweisen des „ URL ” des Bildes an die Cursor-Eigenschaft. Sie können jede Art von Cursor anwenden, die Sie anzeigen möchten, wenn er auf einem Element schwebt. In diesem Artikel wurde die Methode zum Ändern des Cursors in einen Handzeiger demonstriert.