Ändern Sie den Cursor in einen Handzeiger in CSS

1. Mit der Eigenschaft cursor den Mauszeiger in CSS in einen Handzeiger ändern
2. Verwenden der Funktion url() in der Eigenschaft cursor, um den Mauszeiger in CSS in einen benutzerdefinierten Handzeiger zu ändern

In diesem Artikel werden Methoden vorgestellt, um den Mauszeiger in einen Handzeiger zu ändern, während Sie die Maus bewegen, um Elemente in CSS aufzulisten.

Mit der Eigenschaft cursor den Mauszeiger in CSS in einen Handzeiger ändern

Wir können ändern, wie der Mauszeiger angezeigt wird, wenn er über ein bestimmtes Element zeigt, indem wir die CSS-Eigenschaft cursor verwenden.

Zum Beispiel können wir die Eigenschaft verwenden, um den Mauszeiger in einen Handzeiger zu ändern, indem wir den Wert der Eigenschaft cursor auf pointer setzen. Wir können das spezifische Element in CSS auswählen und diese Eigenschaft anwenden.

Die Eigenschaft cursor hat eine Vielzahl von Optionen. Einige Optionen sind help, wait, crosshair, not-allowed, zoom-in, etc.

Erstellen Sie beispielsweise einige Listenelemente mit den Tags ul und li in HTML, wählen Sie den Tag li in CSS aus und setzen Sie die Eigenschaft cursor auf pointer. Wenn wir den Mauszeiger auf die Listenelemente bewegen, ändert sich der Mauszeiger in eine zeigende Hand.

Auf diese Weise können wir den Mauszeiger in CSS zum Handzeiger ändern.

Beispielcode:

<ul>
<li> Porcupine Tree</li>
<li>Opeth</li>
</ul>

li {
 cursor: pointer;
}

Verwenden der Funktion url() in der Eigenschaft cursor, um den Mauszeiger in CSS in einen benutzerdefinierten Handzeiger zu ändern

Wir können auch einen benutzerdefinierten Handzeiger hinzufügen, indem wir die Funktion url() in der CSS-Eigenschaft cursor verwenden.

Wir sollten die URL des Bildes in der Funktion url() angeben. Wir können mehrere URLs als Fallback angeben, damit, wenn eine nicht funktioniert, die andere möglicherweise funktioniert.

Die mehreren url()-Funktionen werden durch ein Komma getrennt. Wenn der Mauszeiger in ein bestimmtes Element bewegt wird, wird der benutzerdefinierte Zeiger angezeigt.

Wir können die URL des benutzerdefinierten Handzeigers in der Funktion festlegen, um den Mauszeiger in CSS zum Handzeiger zu ändern.

Verwenden Sie beispielsweise dieselbe Liste wie in der ersten Methode für die Demonstration. Wählen Sie in CSS das Tag li aus, schreiben Sie die Eigenschaft cursor und setzen Sie die Eigenschaft cursor auf die Funktion url(), wobei die URL https://img.icons8.com/nolan/32/hand-cursor.png ist der Parameter. Als nächstes schreiben Sie als Fallback nach einem Komma auto.

Daher können wir die Funktion url() verwenden, um einen benutzerdefinierten Handzeiger zu erstellen und ihn anzuzeigen, während wir den Mauszeiger über eine Liste in CSS bewegen.

Beispielcode:

<ul>
<li> Porcupine Tree</li>
<li>Opeth</li>
</ul>

li {
 cursor: url("https://img.icons8.com/nolan/32/hand-cursor.png"), auto;
}