In CSS werden verschiedene Arten von Cursoren für verschiedene HTML -Elemente verwendet und um die Art des Cursors zu ändern, die “MauszeigerEigenschaft wird verwendet. Es ermöglicht Ihnen, den Cursortyp zu ändern und den Wert des Cursors festzulegen, den Sie auf dem Bildschirm anzeigen möchten. Als zusätzliche Funktion können Sie auch Ihr eigenes Cursorbild festlegen.

In diesem Leitfaden lernen Sie:

• Was ist Cursor CSS -Eigenschaft
• Wie man Cursor mit CSS zum Bild auf dem Schwebewechsel wechselt

So lass uns anfangen!

Was ist "Cursor" CSS -Eigenschaft?

Um das Erscheinungsbild der Maus über ein HTML -Element zu steuern, ist das “Mauszeiger”Eigenschaft von CSS kann verwendet werden. Es ermöglicht das Wechseln des regulären Cursors in verschiedene Typen wie Copy Cursor, Handzeiger, Greifen und viele weitere. Sie können auch Ihren eigenen benutzerdefinierten Cursor festlegen, indem Sie die URL des Bildes in der Cursor -Eigenschaft festlegen.

Syntax

Die Syntax der Cursor -Eigenschaft ist als:

Cursor: URL ();

Weisen Sie in der oben gegebenen Syntax den Pfad des Bildes in die “zu“URL ()Sie möchten auf dem Bildschirm anzeigen.

Wir werden nun zum Beispiel übergehen, um den regulären Cursor in ein Bild auf Schwebe zu verwandeln.

Wie man Cursor mit CSS zum Bild auf dem Schwebewechsel wechselt?

Um den Cursor in ein Bild auf dem Schwebe zu ändern, fügen Sie zunächst ein Element in HTML hinzu.

Beispiel 1: Wechseln Sie Cursor in ein Bild auf der Schwebeplatte mithilfe der Cursor -Eigenschaft

Wir werden eine Überschrift schaffen

und Button -Klasse -Name “Btn”.

Html

Ändern Sie den Cursor, um sich auf dem Schwebe zu stellen

Klick mich

Derzeit wird der Verlauf der Schaltfläche den Standard -Cursor angezeigt:

Gehen Sie nun zum CSS und ändern Sie den Cursor zum Bild.

Stellen Sie dann den Pfad des Bildes in die “ein“URL ()”. Zum Beispiel haben wir festgelegt: „ICon.Svg”Als unser ausgewähltes Bild. Stellen Sie dann den Wert der Cursor -Eigenschaft als "festAuto”.

CSS

.btn
Cursor: URL (Symbol.SVG), Auto;
Polsterung: 10px;

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

Die angegebene Ausgabe zeigt an, dass der Cursor erfolgreich in ein Bild auf dem Schwebewandel umgewandelt wird.

Notiz: “Auto”Wird als alternative Option in der Cursor -Eigenschaft verwendet; Wenn das Bild nicht geladen wird oder der Dateipfad oder die Datei selbst fehlen, wird das Standardsymbol aufgrund des automatischen Werts auf dem Bildschirm angezeigt.

Beispiel 2: Setzen Sie den Standard -Cursor auf dem Schweber ein

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

Cursor: URL (), Auto;

Infolgedessen ändert sich der Cursor nicht, wenn sie über den Taste schwebt:

Beispiel 3: Bildalternative auf dem Schwebe

Anstelle von Auto können Sie verschiedene Werte des Cursors festlegen, den Sie als Alternative zum Bild anzeigen möchten. Zum Beispiel werden wir den Wert der Cursor -Eigenschaft von “ändern“Auto" Zu "Zeiger”:

Cursor: URL (), Zeiger;

Wie Sie in der folgenden Ausgabe sehen können, wird der Cursor in einen Handzeiger umgewandelt, wenn er über der Taste schwebt:

Wir haben die einfachste Methode zum Ändern des Cursorbildes auf Schwebeplätzen mit CSS bereitgestellt.

Abschluss

In CSS können Sie den Cursor mit dem "Cursor auf das Bild auf dem Schwebeding ändern" ändernMauszeiger" Eigentum. Es ermöglicht das Ändern eines regulären Cursors in ein Bild, indem die “zugewiesen werdenURL”Des Bildes zur Cursoreigenschaft. Sie können jede Art von Cursor anwenden, die Sie anzeigen möchten, wenn es auf einem Element schwebt. Dieser Artikel hat die Methode zum Wechsel des Cursors in einen Handzeiger gezeigt.