Schaltflächen sind ein wesentlicher Bestandteil von Websites und ermöglichen es Benutzern, mit Inhalten zu interagieren. Sie erfüllen verschiedene Funktionen und sind oft für die Benutzererfahrung unerlässlich. Webentwickler sind bestrebt, attraktive und praktische Schaltflächen zu erstellen, um die Aufmerksamkeit der Benutzer zu erregen und ihnen die Navigation auf der Website zu erleichtern.
Ein Aspekt, der für Schaltflächen angepasst werden kann, ist der Cursor, der angezeigt wird, wenn Sie über sie schweben. Standardmäßig sieht der Cursor normalerweise wie ein Pfeil aus, aber mit CSS können Sie ihn in einen anderen Pfeil ändern, um einen interessanten visuellen Effekt zu erzeugen oder explizit auf die Funktionalität der Schaltfläche hinzuweisen.
Sie können den Cursor ändern, wenn Sie über eine Schaltfläche schweben, indem Sie eine Pseudoklasse verwenden :hover in CSS. Wenn der Benutzer den Mauszeiger über eine Schaltfläche bewegt, werden Stile aus dieser Pseudoklasse angewendet. Von dort aus und die Möglichkeit, das Aussehen des Cursors zu ändern.
In diesem Artikel betrachten wir verschiedene Möglichkeiten, den Cursor zu ändern, wenn Sie über eine Schaltfläche schweben, und erfahren, wie dies mit CSS geschehen kann.
Was ist ein Cursor und warum muss er geändert werden?
Das Ändern des Cursors, wenn Sie über eine Schaltfläche oder ein anderes interaktives Element auf einer Webseite schweben, ist ein wichtiger Aspekt der Benutzererfahrung und des Designs. Wenn der Benutzer den Mauszeiger über eine Schaltfläche bewegt, kann eine Änderung des Cursors darauf hindeuten, dass der Bereich interaktiv ist und angeklickt werden kann.
Darüber hinaus kann das Ändern des Cursors auch dazu beitragen, den Funktionswert einer Schaltfläche visuell zu betonen oder zusätzliche Aktionen anzuzeigen, die beim Schweben verfügbar sind. Ein handförmiger Cursor kann beispielsweise anzeigen, ob ein Objekt bewegt werden kann, und ein Cursor, der zu einem Plus-Pfeil wird, kann bedeuten, dass ein zusätzliches Menü oder detaillierte Informationen angezeigt werden, wenn Sie auf die Schaltfläche klicken.
Dadurch kann das Ändern des Cursors die Wahrnehmung und Benutzerfreundlichkeit einer Webseite verbessern, indem einfache und intuitive Navigationselemente für den Benutzer erstellt werden.
CSS-Funktionen zum Ändern des Cursors
CSS bietet verschiedene Möglichkeiten, das Erscheinungsbild des Cursors zu ändern, wenn Sie über Seitenelemente schweben. Dies kann leicht mit der cursor-Eigenschaft erreicht werden.
Mit der Cursor-Eigenschaft können Sie einen der voreingestellten Werte auswählen, die die Art des Cursors bestimmen, oder einen eigenen Cursor verwenden, um den Pfad zum Bild festzulegen.
Einige der vordefinierten Werte der cursor-Eigenschaft sind :
| auto | Standardcursor für dieses Element |
| pointer | hand, die auf den Link zeigt |
| wait | eine Sanduhr, die das Warten bedeutet |
| crosshair | Zielfernrohr zum Markieren von Bereichen |
Um einen neuen Cursor anzuwenden, müssen Sie seinen Wert in der CSS-Regel angeben. Zum Beispiel können Sie den folgenden Code verwenden, um den Cursor zu ändern, wenn Sie über eine Schaltfläche schweben:
button:hoverIn diesem Fall wird der Mauszeiger, wenn Sie auf eine Schaltfläche zeigen, die Form einer Hand annehmen, damit die Benutzer erkennen können, dass die Schaltfläche interaktiv ist.
Daher bietet CSS viele Möglichkeiten, den Cursor zu ändern und eine interaktive Benutzeroberfläche auf Webseiten zu erstellen.
Wie ändere ich den Cursor mit CSS?
Webentwickler müssen häufig den Standard-Mauszeiger ändern, wenn sie über bestimmte Elemente auf einer Seite schweben. Dies kann nützlich sein, um dem Benutzer zusätzliche Informationen über die Aktion zu vermitteln, die er ausführen kann, oder um eine einzigartigere und intuitivere Interaktion mit Elementen zu schaffen.
Es gibt eine CSS-Eigenschaft, um den Mauszeiger zu ändern cursor. Damit können Sie einen der vielen voreingestellten Cursor auswählen oder einen eigenen Cursor mit einem Bild erstellen.
Hier sind einige der am häufigsten verwendeten Werte für eine Eigenschaft cursor:
- auto - Standardcursor für dieses Element;
- default - standard-Pfeilcursor;
- pointer - ein Cursor, der anzeigt, dass das Element eine Referenz ist;
- move - ein Cursor, der anzeigt, dass ein Element verschoben werden kann;
- text - ein Cursor, der angibt, dass ein Element den Text bearbeiten kann;
- crosshair - ein Fadenkreuzcursor, der angibt, dass das Element ein Werkzeug zur Auswahl eines Bereichs ist.
Um den Mauszeiger zu ändern, wenn Sie über ein Element schweben, müssen Sie der Elementauswahl die folgende CSS-Regel hinzufügen:
Wo selector - dies ist der Selektor des Elements, auf das Sie die Stilisierung anwenden möchten, und "value" ist der Wert der Eigenschaft cursor um den Cursor zu ändern. Zum Beispiel:
In diesem Beispiel ändert sich der Cursor, wenn Sie den Cursor über eine Schaltfläche bewegen, zu einem Zeigefinger-Pfeil, der anzeigt, dass die Schaltfläche eine Referenz ist.
Sie können auch einen eigenen Cursor mit einem Bild erstellen. Dazu müssen Sie den Pfad zum Bild im Eigenschaftswert angeben cursor. Zum Beispiel:
In diesem Beispiel, wenn Sie den Mauszeiger über ein Element mit einer Klasse bewegen custom, das Bild wird verwendet custom_cursor.png anstelle des Standardcursors. Beachten Sie, dass nach dem Bildpfad der Wert folgt auto wird verwendet, wenn das Bild nicht gefunden wird oder nicht angezeigt werden kann.
Wenn Sie den Cursor mit CSS ändern, können Sie interaktive und benutzerdefinierte Webseiten erstellen, die die Interaktion erleichtern und die Benutzererfahrung verbessern.
Verwenden der Cursor-Eigenschaft
Mit der Cursor-Eigenschaft in CSS können Sie das Erscheinungsbild des Cursors ändern, wenn Sie sich über Seitenelemente bewegen. Auf diese Weise können Sie eine interaktive und übersichtliche Benutzeroberfläche erstellen.
Die Cursor-Eigenschaft akzeptiert verschiedene Werte, die die Art des Cursors angeben. Im Folgenden sind die häufigsten Werte aufgeführt:
| Bedeutung | Die Beschreibung |
|---|---|
| auto | Der Browser bestimmt die Art des Cursors selbst |
| default | Standardansicht des Cursors |
| pointer | Zeiger (wie wenn Sie über einen Link schweben) |
| text | Textcursor (wie beim Markieren von Text) |
| wait | Warten (wie beim Warten auf das Laden einer Seite) |
| crosshair | Fadenkreuz (wie bei der Auswahl eines Bereichs in einem Bild) |
Neben den Standardwerten können Sie auch Ihre Bilder als Cursor verwenden. Legen Sie dazu die cursor-Eigenschaft auf url (Bildpfad) fest.
Zum Beispiel, um ein Cursor-Bild zu verwenden.png als Cursor müssen Sie den folgenden CSS-Code hinzufügen:
.example-buttonWenn Sie also den Mauszeiger über ein Element mit der Klasse example-button bewegen, ändert sich der Cursor in ein Cursor-Bild.png .
Liste der verfügbaren Werte für die cursor-Eigenschaft
Mit der Cursor-Eigenschaft in CSS können Sie das Erscheinungsbild des Cursors ändern, wenn Sie über ein Element schweben. Die folgende Liste enthält einige der verfügbaren Werte für diese Eigenschaft:
- auto - Der Browser wählt selbst den richtigen Cursor für das Element aus.
- default ist ein Standardcursor, normalerweise ein Pfeil.
- pointer ist ein Zeiger, normalerweise in Form einer Hand.
- crosshair - Fadenkreuz zur genauen Angabe.
- text ist ein Textcursor, normalerweise ein vertikaler Strich.
- move - Der Ziehcursor.
- wait ist ein Wartecursor, normalerweise eine Sanduhr.
- help - Ein Hilfecursor, normalerweise ein Fragezeichen.
- not-allowed - Der Verbotscursor gibt an, dass die Aktion nicht verfügbar ist.
- progress - Der Cursor zur Ausführung einer Aufgabe, normalerweise ein Kreis mit Animationen.
Dies sind nur einige der Werte, die für die cursor-Eigenschaft verwendet werden können. Dank der CSS-Funktionen können Sie den Cursor auswählen, der Ihren Bedürfnissen und dem Design der Webseite am besten entspricht.
Beispiele für das Ändern des Cursors, wenn Sie über eine Schaltfläche schweben
In CSS gibt es mehrere Möglichkeiten, den Standardcursor zu ändern, wenn Sie über eine Schaltfläche schweben. Im Folgenden sind Beispiele für die Verwendung verschiedener Werte der cursor-Eigenschaft aufgeführt :
Dieses Cursorsymbol zeigt an, dass die Schaltfläche anklickbar ist und Aktionen auslösen kann. Wird normalerweise für Schaltflächen, Links und andere Elemente verwendet, mit denen der Benutzer interagieren kann.
Dieses Cursorsymbol zeigt an, dass auf der Schaltfläche eine Referenz oder eine Eingabeaufforderung angezeigt wird, die dem Benutzer zur Verfügung steht. Wird normalerweise für Schaltflächen mit einem Fragezeichen oder einem Hilfesymbol verwendet.
Dieses Cursorsymbol zeigt an, dass die Schaltfläche inaktiv ist und nicht angeklickt oder verwendet werden kann. Wird normalerweise für Schaltflächen verwendet, die vorübergehend nicht verfügbar sind oder keine weiteren Aktionen zulassen.
Dieses Cursorsymbol zeigt an, dass auf der Schaltfläche ein Prozess ausgeführt wird oder Daten geladen werden. Wird normalerweise für Schaltflächen verwendet, die asynchrone Vorgänge auslösen und den Fortschritt der Ausführung anzeigen.
Anhand der oben beschriebenen Beispiele können Sie interaktive Schaltflächen mit unterschiedlichen Mauszeigersymbolen erstellen, wenn Sie sich bewegen. Dies wird dazu beitragen, die Benutzererfahrung zu verbessern und Ihre Benutzeroberfläche klarer und benutzerfreundlicher zu machen.
