Heim >Web-Frontend >CSS-Tutorial >Wie stelle ich mit CSS verschiedene Cursortypen ein?
Wie stelle ich mit CSS verschiedene Cursortypen ein?
- WBOYnach vorne
- 2023-09-22 19:45:031624Durchsuche
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.
Was ist ein Cursor?
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.
Grammatik
css selector {
courser : courser type;
}
Jetzt werden wir die verschiedenen Arten von Cursorn untersuchen, die mit CSS festgelegt werden können
Standardcursor
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.
Beispiel 1
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>
Zeiger-Cursor
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;
}
Textcursor
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;
}
Fadenkreuz-Cursor
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;
}
Cursor bewegen
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;
}
Cursor nicht erlaubt
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;
}
Fortschrittscursor
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 auf den Cursor
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;
}
Hilfe-Cursor
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;
}
Beispiel 2
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>
Passen Sie Ihren Cursor mit CSS an
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.
Beispiel 3
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.
Fazit
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!