Was sind Cursor in CSS?
Jeden Tag verwenden wir bereits angepasste Cursor. Diese Interaktion wird durch die Verwendung modifizierter Cursor ermöglicht, z. B. wenn Sie mit der Maus über Schaltflächen fahren, verwandelt sich der Zeigercursor in eine Hand, oder wenn Sie mit der Maus über den Text fahren und sich der Cursor in einen Textcursor verwandelt.
Cursor können jedoch auch verwendet werden, um unseren Benutzern verschiedene zusätzliche kreative Möglichkeiten zu bieten.
Bevor wir mit der Entwicklung unserer benutzerdefinierten Cursor beginnen, sollten wir uns darüber im Klaren sein, dass CSS bereits über Standardcursor für verschiedene häufig ausgeführte Aktionen verfügt.
Diese Cursor bieten Aktionsmöglichkeiten genau an der Stelle, über der Sie sich befinden. Beispiele hierfür sind Cursor, die anzeigen, dass Sie auf Links klicken, Elemente ziehen und ablegen, Objekte vergrößern und verkleinern und vieles mehr.
d Flip-Flop
Verwenden Sie die CSS-Cursor-Eigenschaft, um die Art des gewünschten Cursors zu beschreiben.
CSS-Cursor-Eigenschaft
Mit der CSS-Cursor-Eigenschaft können wir die Art des Cursors angeben, der dem Benutzer angezeigt werden soll.
Die Verwendung von Fotos als Schaltflächen zum Senden in Formularen ist eine nützliche Anwendung dieser Funktion. Standardmäßig wird anstelle eines Zeigers eine Hand angezeigt, wenn sich der Cursor über einem Link befindet. Die Schaltfläche „Senden“ eines Formulars führt jedoch nicht dazu, dass das Formular geändert wird. Dies dient als visueller Hinweis darauf, dass das Bild immer dann angeklickt werden kann, wenn jemand mit der Maus über ein Bild fährt, das eine Senden-Schaltfläche darstellt.
Diese Eigenschaft wird durch null oder mehr durch Kommas getrennte Werte angegeben, gefolgt von einem Schlüsselwortwert nach Bedarf, und jeder verweist auf die Bilddatei.
Syntax
cursor: value;
Immobilienwerte
| Auto: | Die Standardeinstellung für dieses Attribut ist die Platzierung des Cursors.
| Alias: | Dieses Attribut wird verwendet, um den erstellungsbezogenen Indikator des Cursors anzuzeigen.
| All-Scroll: | Der Cursor in diesem Attribut bezeichnet das Scrollen.
| Zelle: | Der Cursor in dieser Eigenschaft zeigt an, dass derzeit eine Zelle oder eine Gruppe von Zellen ausgewählt ist.
| Kontextmenü: | Der Cursor in diesem Attribut zeigt das Vorhandensein eines Kontextmenüs an.
| Col-Resize: | Wenn sich der Cursor über einer Spalte in dieser Eigenschaft befindet, kann die Größe horizontal geändert werden.
| Kopieren: | Der Cursor in dieser Eigenschaft zeigt an, dass etwas kopiert werden muss.
| Fadenkreuz: | Der Cursor erscheint in diesem Attribut als Fadenkreuz.
| Standard: | Der Standardcursor.
| E-Größe ändern: | Der Cursor in diesem Attribut zeigt an, dass der rechte Rand einer Box verschoben werden soll.
| Größe ändern: | Der Cursor in diesem Attribut stellt einen bidirektionalen Größenänderungscursor dar.
| Helfen: | In dieser Eigenschaft zeigt der Cursor an, dass Hilfe verfügbar ist.
| Bewegen: | Der Zeiger in dieser Eigenschaft impliziert, dass etwas verschoben werden muss
| . n-Größe ändern: | Bei Verwendung der n-resize-Eigenschaft zeigt der Zeiger an, dass die obere Grenze einer Box verschoben werden soll.
| Was-Größe ändern: | Mit dieser Eigenschaft zeigt der Cursor an, dass der Rand einer Box nach rechts und oben verschoben werden soll.
| Neue Größe: | Der bidirektionale Größenänderungscursor wird durch dieses Attribut angegeben.
| Ns-Größe ändern: | Ein bidirektionaler Größenänderungscursor wird durch das Attribut ns-resize angezeigt.
| Neue Größe: | Der Cursor in diesem Attribut zeigt an, dass der obere und untere Rand einer Box nach oben und links verschoben werden soll.
| Nasengröße ändern: | Der bidirektionale Größenänderungscursor wird durch dieses Attribut angegeben.
| Kein Tropfen: | Der Cursor in diesem Attribut zeigt an, dass das gezogene Objekt nicht an dieser Stelle abgelegt werden kann.
| Keiner: | Für das Element wird gemäß diesem Attribut kein Cursor angezeigt.
| Nicht erlaubt: | Der Cursor in dieser Eigenschaft zeigt an, dass die angeforderte Aktion nicht ausgeführt wird.
| Zeiger: | Der Cursor in dieser Eigenschaft dient als Zeiger und zeigt den Linkfortschritt an.
| Fortschritt: | Der Cursor in diesem Attribut zeigt an, dass das Programm aktiv ist.
| Zeilengröße ändern: | Der Cursor zeigt an, dass diese Funktion die Größenänderung vertikaler Zeilen ermöglicht.
| S-Größe ändern: | Bei Verwendung dieser Eigenschaft zeigt der Zeiger an, dass die untere Grenze einer Box abgesenkt werden soll.
| Größe ändern: | Der Cursor in diesem Attribut zeigt an, dass der Rand einer Box nach rechts und unten verschoben werden soll.
| Sw-Größe ändern: | Der Cursor in diesem Attribut zeigt an, dass der linke und untere Rand einer Box verschoben werden soll.
| Text: | Der Cursor in diesem Attribut bezeichnet Text, der ausgewählt werden kann.
| URL: | Diese Eigenschaft enthält eine Liste benutzerdefinierter Cursor-URLs, die durch Kommas getrennt sind, und einen generischen Cursor am Ende der Liste.
| Vertikaler Text: | Der Cursor in diesem Attribut zeigt mögliche vertikale Textauswahlen an.
| W-Größe ändern: | Bei Verwendung dieser Eigenschaft zeigt der Zeiger an, dass der linke Rand einer Box verschoben werden soll.
Beispiel
Dieses Beispiel zeigt, wie die Cursor-Eigenschaft verwendet wird. Das Programm ist beschäftigt, da der Wert der Cursoreigenschaft auf „Warten“ eingestellt ist.
Ausrichten eines Bildes in CSS
CSS cursor property .wait { cursor: wait; } h1 { color: red; } <p> Login Credentials </p> Ausgabe
Mit der CSS-Cursor-Eigenschaft können wir die Art des Cursors angeben, der dem Benutzer angezeigt werden soll. Die Verwendung von Fotos als Schaltflächen zum Senden in Formularen ist eine nützliche Anwendung dieser Funktion. Standardmäßig wird anstelle eines Zeigers eine Hand angezeigt, wenn sich der Cursor über einem Link befindet.
