CSS (Cascading Style Sheets) ist ein leistungsstarkes Tool zum Entwerfen des visuellen Erscheinungsbilds Ihrer Website, einschließlich Cursorstilen. Der Cursor ist ein wichtiger Aspekt des Webdesigns. Es hilft Benutzern, visuelles Feedback zu geben und ermöglicht ihnen eine effektive Interaktion.
Der Cursor ist ein Positionsindikator, der die aktuelle Position des Benutzers auf dem Bildschirm anzeigt. Es ist auch als „Caret“ bekannt. Es spielt eine wichtige Rolle bei der Gestaltung von Benutzeroberflächen. In CSS können wir den Cursor nach Bedarf setzen, um dem Benutzer ein visuelles Feedback zu geben, das angibt, welche Aktionen an einer bestimmten Stelle ausgeführt werden können.
css selector {
courser : courser type;
}
Jetzt werden wir die verschiedenen Arten von Cursorn untersuchen, die mit CSS festgelegt werden können
Im Webdesign ist der Standardcursor der am häufigsten verwendete Cursortyp, der verwendet wird, wenn kein anderer Cursor angegeben ist. Es sieht aus wie ein Pfeilzeiger auf dem Bildschirm und zeigt an, dass der Benutzer auf das Element klicken kann.
Hier ist ein Beispiel für die Einstellung des Standardcursors.
<!DOCTYPE html>
<html>
<head>
<style>
body {
text-align: center;
}
a {
cursor: default;
}
</style>
</head>
<body>
<h2>This is an example of default cursor</h2>
<a href="https://www.tutorialspoint.com/index.htm" class="my-link">Click Here</a>
</body>
</html>
Der Zeigercursor wird durch eine Hand dargestellt, die auf einen Link zeigt. Wenn ein Benutzer mit der Maus über einen Link fährt, bedeutet dies, dass das Element anklickbar ist. Wir können den folgenden Code verwenden, um den Zeigercursor auf −
zu setzencss-elector {
cursor: pointer;
}
Der Textcursor ist eine blinkende horizontale oder vertikale Linie, die in Form eines I-förmigen Cursorzeigers erscheint. Wenn ein Benutzer mit der Maus über Text oder ein Texteingabefeld fährt, zeigt dies an, dass er Text bearbeitet oder ausgewählt hat. Wir können den folgenden Code verwenden, um den Textcursor zu setzen -
css-elector {
cursor: text;
}
Der Fadenkreuz-Cursor erscheint einfach als horizontale und vertikale Linien für den Fadenkreuz-Zeiger. Der Fadenkreuz-Cursor wird verwendet, um einen bestimmten Bereich auf dem Bildschirm auszuwählen, beispielsweise in Bildbearbeitungswerkzeugen. Wir können den Fadenkreuz-Cursor mit dem folgenden Code setzen -
css-elector {
cursor: crosshair;
}
Der mobile Cursor erscheint auf dem Bildschirm in Form von vier Pfeilzeigern. Es wird normalerweise zum Ziehen und Ablegen eines Elements verwendet, um anzuzeigen, dass es verschoben werden kann. Wir können den folgenden Code verwenden, um den beweglichen Cursor festzulegen -
css-elector {
cursor: move;
}
Ein nicht zulässiger Cursor bedeutet, dass der angeforderte Vorgang nicht ausgeführt wird. Es erscheint in Form eines Kreises mit diagonalen Linien. Wir können den folgenden Code verwenden, um den unzulässigen Cursor zu setzen –
css-elector {
cursor: not-allowed;
}
Der Fortschrittscursor erscheint in Form eines rotierenden Kreises. Es zeigt an, dass das Programm im Hintergrund beschäftigt ist, der Benutzer jedoch weiterhin mit der Schnittstelle interagieren kann. Wir können den folgenden Code verwenden, um den Fortschrittscursor zu setzen -
css-elector {
cursor: progress;
}
Warten Sie, bis der Cursor als sich drehendes Windrad erscheint. Es zeigt an, dass das Programm ausgelastet ist und nicht mit der Benutzeroberfläche interagieren kann. Wir können den folgenden Code verwenden, um den Wartecursor zu setzen -
css-elector {
cursor: wait;
}
Der Hilfecursor erscheint als Fragezeichenzeiger. Wird verwendet, wenn der Benutzer Hilfe benötigt, beispielsweise wenn er auf ein Hilfesymbol oder eine Hilfeschaltfläche klickt. Wir können den Hilfecursor mit dem folgenden Code setzen -
css-elector {
cursor: help;
}
Hier ist ein Beispiel dafür, wie Sie die verschiedenen Cursortypen mithilfe von CSS festlegen.
<!DOCTYPE html>
<html>
<head>
<style>
body{
text-align:center;
background-color: lightgreen;
}
div{
margin: 3px;
padding: 5px;
}
</style>
</head>
<body>
<h2>Setting the different types of cursors using CSS</h2>
<h3>Move the mouse over the words to see the cursor change:</h3>
<div style="cursor:default">Default</div>
<div style="cursor:text">Text</div>
<div style="cursor:pointer">Pointer</div>
<div style="cursor:crosshair">Crosshair</div>
<div style="cursor:move">Move</div>
<div style="cursor:not-allowed">not-allowed</div>
<div style="cursor:progress">Progressd</div>
<div style="cursor:wait">wait</div>
<div style="cursor:help">help</div>
<div style="cursor:e-resize">e-resize</div>
<div style="cursor:ne-resize">ne-resize</div>
<div style="cursor:nw-resize">nw-resize</div>
<div style="cursor:n-resize">n-resize</div>
<div style="cursor:se-resize">se-resize</div>
<div style="cursor:sw-resize">sw-resize</div>
<div style="cursor:s-resize">s-resize</div>
<div style="cursor:w-resize">w-resize</div>
</body>
</html>
Zusätzlich zu den von CSS bereitgestellten Standardcursorn können wir auch benutzerdefinierte Cursor verwenden. Durch die Verwendung benutzerdefinierter Cursor können wir unserer Website eine einzigartige Note verleihen.
Hier ist ein Beispiel für die Erstellung eines benutzerdefinierten Cursors mit CSS.
<!DOCTYPE html>
<html>
<head>
<style>
body{
text-align: center;
}
.my-cursor {
width: 200px;
margin: auto;
background-color: lightblue;
cursor: url(https://cdn.icon-icons.com/icons2/1875/PNG/96/cursor_120340.png), auto;
}
</style>
</head>
<body>
<h2>Custom Cursors with CSS</h2>
<div class="my-cursor">
<h3>Move the mouse over to see the cursor change</h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text </p>
</div>
</body>
</html>
Im obigen Beispiel haben wir ein div-Element mit einer Klasse von my-cursor erstellt. Anschließend setzen wir die Cursor-Eigenschaft auf URL ( https://cdn.icon-icons.com/icons2/1875/PNG/96/cursor_120340.png), automatisch. Das bedeutet, dass der Browser die Datei „cursor_120340.png“ als benutzerdefinierten Cursor verwendet und auf den Standardcursor zurückgreift, wenn die Datei nicht gefunden wird oder nicht geladen werden kann.
Hier haben wir verschiedene Arten von CSS-Cursoren besprochen. Es ist ein leistungsstarkes Tool für Webdesigner, mit dem sie Cursorstile anpassen und visuelles Feedback für Benutzerinteraktionen bereitstellen können. Mithilfe des obigen Codes können wir in CSS verschiedene Arten von Cursorn festlegen.
Das obige ist der detaillierte Inhalt vonWie stelle ich mit CSS verschiedene Cursortypen ein?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Der Unterschied zwischen WeChat-Dienstkonto und offiziellem Konto
So spielen Sie Videos mit Python ab
Empfohlene Reihenfolge zum Erlernen von C++ und der C-Sprache
So erstellen Sie eine Webseite in Python
Suchverlauf löschen
Welche mobilen Betriebssysteme gibt es?
Neueste Nachrichten zu Shib-Münzen
cad2012 Seriennummer und Schlüsselübergabe
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
