Wie man Cursor zu einem Handzeiger in CSS wechselt

Es gibt viele Arten von Cursoren, die auf verschiedenen Bildschirmen verwendet werden. Sie können den Art des Cursors ändern, indem Sie die CSS Cursor -Eigenschaft verwenden, die angibt, welche Art von Cursor für den Benutzer angezeigt werden soll, z. Wir können einen regulären Cursor in einen Handzeiger ändern, indem wir der Cursoreigenschaft den Wert "Zeiger" geben.

In diesem Artikel werden wir lernen:

• “Mauszeiger" Eigentum
• Syntax der Cursor -Eigenschaft
• So wechseln Sie den Cursor in einen Handzeiger in CSS?

Lass uns anfangen!

Cursor CSS -Eigenschaft

CSS “MauszeigerEigenschaften steuern das Erscheinungsbild des Mauszeigers, wenn es über einem Element liegt. Die Cursoreigenschaft in CSS ermöglicht es uns, einen regulären Cursor in einen Handcursor, den Cursor, den Zellcursor, den Grab -Cursor usw. zu wechseln. Jede Cursorform dient unterschiedliche Zwecke. Zum Beispiel gibt der Kopiercursor das Kopieren des Textes an, und der Handzeiger zeigt an, auf Links oder Menüs zu klicken. Jetzt bewegen wir uns zur Syntax der Cursor -Eigenschaft.

Syntax der Cursor -Eigenschaft

Die Syntax der Cursor -Eigenschaft lautet:

Cursor: Wert;

Anstelle von 'Wert', Wir können den Wert des Cursors zuweisen, den wir auf dem Bildschirm anzeigen möchten. Zum Beispiel Zeiger, kopieren, greifen und viele mehr.

Nach dem Verständnis der Syntax des Cursor.

Wie man Cursor zu einem Handzeiger in CSS wechselt?

Betrachten wir ein praktisches Beispiel, um die Arbeit des Cursor -Eigentums zu veranschaulichen.

Beispiel

In diesem Beispiel erstellen wir eine Liste in der HTML -Datei, die drei Elemente enthalten:

• Html


• CSS


• JavaScript

Derzeit sieht unser Cursor so aus:

Danach wechseln wir zur CSS -Datei und setzen den Cursorwert auf eine “Zeiger”Um den Cursor -Typ in Handzeiger zu ändern. Darüber hinaus werden wir den Rand der Liste als "festlegen" festlegen "25px"Und der Rand links als"500pxDies liegt daran, dass zwischen den Listenelementen und auch von der linken Seite der Liste Platz erstellt wird:

li
Cursor: Zeiger;
Rand: 25px;
Rand-Links: 500px;

Wir haben den Cursorwert auf “festgelegt“Zeiger„, Die sich zu einem Handzeiger ändern, wenn der Benutzer über ein Listenelement schwebt.

Gehen Sie nach der Implementierung des CSS -Codes in die HTML und sehen Sie sich das Ergebnis an:

Hier können wir sehen, dass sich der Cursor zum Listenelement wechselt, er wechselt an einem Handzeiger. Dies liegt an der "Mauszeiger" Eigentum

Abschluss

Die Cursoreigenschaft in CSS ermöglicht das Wechseln eines regulären Cursors in einen Handzeiger. Um den regulären Cursor an einem Handzeiger zu ändern, müssen Sie die “zuweisen“ZeigerWert für die Cursor -Eigenschaft. Sie können jede Art von Cursor anwenden, die Sie auf dem Bildschirm anzeigen möchten. Dieser Artikel zeigt die Methode, den Cursor in einen Handzeiger zu ändern.