Heim > Artikel > Web-Frontend > Verwenden Sie CSS, um das Erscheinungsbild Ihres Cursors zu ändern
Verwenden Sie CSS, um das Erscheinungsbild Ihres Cursors zu ändern
- 王林nach vorne
- 2023-09-23 14:53:051502Durchsuche
Wir können CSS-Cursoreigenschaften verwenden, um die Cursorbilder verschiedener Elemente in HTML-Dokumenten zu manipulieren.
Syntax
The syntax of CSS cursor property is as follows:
Selector {
cursor: /*value*/
}Das Folgende sind die Werte des CSS-Cursor-Attributs:
| Sr. Name wartet auf Erstellung | |
|---|---|
| Vollständiger Bildlauf | Es bedeutet Inhalt, der sein kann in jede Richtung gescrollt |
| Automatisch | Standardmäßig setzt der Browser den Cursor |
| Zelle | bedeutet, dass eine Zelle eine Gruppe von Zellen ) kann ausgewählt werden |
| Kontextmenü | bedeutet, dass das Kontextmenü verfügbar ist |
| Col-Resize | bedeutet, dass die Größe der Spalte horizontal geändert werden kann |
| Kopieren | bedeutet, was kopiert werden soll |
| Fadenkreuz | Es erscheint als Kreuzlinie |
| Es rendert den Standardcursor | |
| E-Resize | bedeutet, den Rand der Box nach rechts (Osten) zu verschieben. 11 |
| bedeutet, die Cursorgröße in beide Richtungen anzupassen. |
12 td> |
| 16 n-Resize | bedeutet Der Rand der Box wird nach oben (Norden) verschoben |
|
17 ne-resize | bedeutet, dass der Rand der Box nach oben und nach rechts (Norden/Osten) verschoben wird |
| 18 20 nw-resize |
|
| 21nwse-resize | |
| 22
24 |
|
| Es bedeutet, dass die angeforderte Aktion nicht ausgeführt wird
25 |
|
| Es ist ein Zeiger, der einen Link darstellt
26 |
|
| bedeutet, dass das Programm beschäftigt ist (in Bearbeitung)
27 |
|
| td> | bedeutet, dass die Größe der Zeile vertikal geändert werden kann. 28 |
| bedeutet, den Rand der Box nach unten (Süden) zu verschieben
29 |
|
| bedeutet, den Rand der Box nach unten und nach rechts (Süden/Osten) zu verschieben
30 |
|
| gibt an, dass ein Rand nach unten und links (Süden/Westen) verschoben werden soll
31 |
|
| gibt Text an, der ausgewählt werden kann 32 zeigt an optionaler vertikaler Layouttext |
|
| 34 |
w-resize bedeutet, dass sich der Rand des Felds nach links (Westen) bewegt |
| 35 |
Warten bedeutet das Programm ist richtig Beschäftigt |
| 36 |
Vergrößern p> bedeutet, dass etwas vergrößert werden kann |
| 37 |
Verkleinern Es bedeutet, dass etwas verkleinert werden kann. |
| 38 |
Anfänglich Es setzt die Cursoreigenschaften auf ihre Standardwerte. |
| 39 |
Inherited Es erbt das Cursorattribut vom übergeordneten Element. |
| Das Folgende ist ein Beispiel für die Implementierung von CSS-Cursor-Eigenschaften |
BeispielLive-Demonstration<!DOCTYPE html>
<html>
<head>
<style>
div {
margin: 5px;
float: left;
}
#one {
background-color: beige;
}
#two {
background-color: lavender;
}
.n-resize {cursor: n-resize;}
.ne-resize {cursor: ne-resize;}
.nw-resize {cursor: nw-resize;}
.not-allowed {cursor: not-allowed;}
.pointer {cursor: pointer;}
</style></head>
<body>
<div id="one">
<div class="nw-resize">left corner</div><div class="n-resize">up</div>
<div class="ne-resize">right corner</div>
</div>
<div id="two">
<div class="not-allowed">Not-allowed</div><div class="pointer">Pointer</div>
</div>
</body>
</html>Ausgabe
|
Das obige ist der detaillierte Inhalt vonVerwenden Sie CSS, um das Erscheinungsbild Ihres Cursors zu ändern. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!