Wir können CSS-Cursoreigenschaften verwenden, um die Cursorbilder verschiedener Elemente in HTML-Dokumenten zu manipulieren.
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 | < /th> |
|---|---|
| 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< /p> |
| Col-Resize | < strong> 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 |
| 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 < p>nw-resize | |
| 21< p>nwse-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 | |
| 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 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. < /p> |
| 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>Nach dem Login kopieren |
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
