Ändern des Cursors, wenn Sie über eine Schaltfläche mit CSS schweben - detaillierter Leitfaden

Cursor - dies ist ein Symbol, das auf dem Bildschirm angezeigt wird und dem Benutzer anzeigt, welche Aktion ausgeführt wird, wenn er auf einen bestimmten Bereich klickt. Webentwickler können das Erscheinungsbild des Cursors mithilfe der CSS-Sprache ändern, um ihn informativer und attraktiver zu machen. Dies ist besonders nützlich, wenn Sie interaktive Elemente erstellen, z. B. Schaltflächen, die auf Mausbewegungen reagieren.

So ändern Sie das Erscheinungsbild des Cursors, wenn Sie über eine Schaltfläche schweben in CSS wird durch die Verwendung der Eigenschaft erreicht cursor. Sie können verschiedene Cursorsymbole auf eine Schaltfläche anwenden, um dem Benutzer anzuzeigen, dass sie interaktiv ist und auf Hover reagiert.

Dazu müssen Sie dem gewünschten Element (in unserem Fall der Schaltfläche) einen Eigenschaftswert zuweisen cursor. Es gibt mehrere vordefinierte Werte in CSS, wie zum Beispiel pointer (Zeiger), crosshair (Zielfernrohr), help (Hilfe) und andere. Alternativ können Sie auch eigene Bilder als Cursorsymbol verwenden.

Was ist ein Cursor in CSS

Es gibt verschiedene Eigenschaftswerte in CSS cursor, die die Art des Cursors bei verschiedenen Benutzeraktionen bestimmen. Zum Beispiel:

• auto: der Browser wählt den richtigen Cursor selbst aus;
• pointer: ein Cursor in Form einer Hand, die auf ein Element zeigt, was bedeutet, dass das Element angeklickt werden kann;
• text: ein vertikaler Strich, der anzeigt, dass Text eingegeben werden kann;
• move: Ein vierzeiliger Cursor, der anzeigt, ob ein Element verschoben werden kann.

Mit der Eigenschaft cursor wir können das Erscheinungsbild des Cursors je nach Situation ändern und mit dem Benutzer kommunizieren, um ihm intuitive Informationen über die Aktionen zu geben, die er auf der Seite ausführen kann.

Wie ändere ich den Cursor, wenn ich über eine Schaltfläche schwebe

Die Pseudoklasse wird verwendet, um diese Aufgabe in CSS auszuführen :hover das auf ein Element angewendet wird, wenn der Mauszeiger darüber bewegt wird. Verwenden der Eigenschaft cursor sie können die Form des Cursors ändern, wenn Sie über eine Schaltfläche schweben.

Angenommen, wir haben eine Schaltfläche mit einer Klasse button. Sie können den folgenden CSS-Code verwenden, um den Cursor zu ändern, wenn Sie über eine Schaltfläche auf z. B. einen Zeigefinger schweben:

Hier wenden wir den Stil mit einer Pseudoklasse auf eine Schaltfläche an :hover Wenn Sie den Mauszeiger über eine Schaltfläche bewegen, müssen Sie die Form des Buttons mit dem Zeigefinger ändern.

Verwenden Sie außerdem die Eigenschaft cursor sie können auch andere Cursorformen anwenden, z. B. einen Pfeil, einen Textcursor, ein Fadenkreuz und andere. Es gibt mehrere Inline-Werte für eine Eigenschaft in CSS cursor.

Also mit der CSS-Eigenschaft cursor und eine Pseudoklasse :hover sie können den Cursor leicht ändern, wenn Sie über eine Schaltfläche schweben und eine interaktive und benutzerfreundliche Benutzeroberfläche erstellen.

Liste der verfügbaren Cursor in CSS

Es gibt viele verschiedene Cursor in CSS, die Sie verwenden können, wenn Sie über Seitenelemente schweben. Jeder Cursor hat seinen eigenen Zweck und kann verwendet werden, um die Benutzererfahrung zu verbessern.

1. auto: Der Standardcursor, den der Browser selbst für das Element auswählt.

2. default: Ein Standardpfeilcursor, der für normale Elemente verwendet wird.

3. pointer: Ein Cursor, der eine Verknüpfung oder Interaktion mit einem Element anzeigt.

4. crosshair: Ein Fadenkreuzcursor, der darauf hinweist, dass ein Bereich im Bild ausgewählt werden kann.

5. move: Ein Cursor, der angibt, ob ein Element verschoben werden kann.

6. text: Ein Cursor, der angibt, ob der Text bearbeitet werden kann.

7. wait: Ein Cursor, der das Warten oder den Ladevorgang anzeigt.

8. help: Ein Cursor mit einem Fragezeichen, der anzeigt, ob eine Hilfe oder ein Tooltip vorhanden ist.

9. not-allowed: Ein Cursor, der angibt, dass die Aktion unerwünscht oder nicht verfügbar ist.

10. progress: Ein Cursor, der angibt, wie eine Aufgabe ausgeführt oder geladen wird.

Dies sind nur einige der Cursor, die in CSS verfügbar sind. Die Auswahl des Cursors hängt vom Typ des Elements und dessen Ziel auf der Seite ab. Verwenden Sie diese Cursor, um eine klarere und benutzerfreundlichere Benutzeroberfläche für die Benutzer zu erstellen.

Beispiele für das Ändern des Cursors in CSS

Hier sind einige Beispiele:

Dies sind nur einige Beispiele aus den vielen CSS-Funktionen zum Ändern des Cursors, wenn Sie über ein Element schweben. Sie können einen beliebigen geeigneten Cursor-Stil auswählen, um eine benutzerfreundliche Oberfläche zu erstellen.

So fügen Sie eine Cursor-Animation hinzu, wenn Sie über eine Schaltfläche schweben

In CSS können Sie die Art des Cursors ändern, wenn Sie über ein Element schweben. Aber was ist, wenn wir eine Cursor-Animation hinzufügen möchten, wenn wir über eine Schaltfläche schweben? In diesem Artikel erfahren Sie, wie Sie dies tun können.

Sie können @keyframes und animation verwenden, um eine Zeigeranimation hinzuzufügen, wenn Sie über eine Schaltfläche schweben. Hier ist ein Beispielcode:

cursor: url('animation.gif') 20 20, auto;

In diesem Beispiel fügen wir der Schaltfläche, der wir eine Cursor-Animation hinzufügen möchten, die Klasse "btn" hinzu. Im CSS-Stil für diese Klasse weisen wir darauf hin, dass der Cursor, wenn Sie über eine Schaltfläche schweben, zu einem Animationsbild "Animation" geändert werden muss.gif". Die Koordinaten 20 20 zeigen den Punkt an, an dem sich das oberste linke Pixel des Cursors im Bild befinden soll. Der Wert "auto" gibt an, dass der Standardcursor des Betriebssystems verwendet wird, wenn kein animierter Cursor vorhanden ist.

Jetzt, da Sie wissen, wie Sie eine Cursor-Animation hinzufügen, wenn Sie über eine Schaltfläche schweben, können Sie diese Technik verwenden, um die Interaktivität Ihrer Webseiten zu verbessern.