Heim > Artikel > Web-Frontend > Definition und Verwendung des CSS-Cursors
cursor:hand
im CSS-Attribut So stellen Sie die Maus auf Handtyp unter IE ein: Cursor: Hand, aber in FIREFOX Wenn es ungültig ist, besteht die Lösung darin, in FIREFOX Folgendes festzulegen: Cursor: Zeiger.
Und dieser Zeigerwert ist unter IE und FIREFOX üblich, daher verwenden wir: Cursor:Zeiger .
Im Allgemeinen wird die Maus als nach oben gerichteter diagonaler Pfeil angezeigt. Wenn sie über den Text bewegt wird, wird sie zu einer vertikalen Linie mit einem Kopf. es wird eine Handform.
Aber Sie können CSS verwenden, um den Anzeigeeffekt der Maus zu steuern. Sie können beispielsweise die Maus über normalen Text bewegen und ihn als Handform anzeigen.
Das Cursor-Attribut gibt den Typ (die Form) des anzuzeigenden Cursors an.
Dieses Attribut definiert die Cursorform, die verwendet wird, wenn der Mauszeiger innerhalb der Grenzen eines Elements platziert wird (CSS2.1 definiert jedoch nicht, welche Grenzen diesen Bereich bestimmen).
|
Die URL des benutzerdefinierten Cursors, der verwendet werden soll. Hinweis: Definieren Sie immer einen normalen Cursor am Ende dieser Liste, falls kein verfügbarer Cursor durch die URL definiert ist. |
||||||||||||||||||||||||||||||||||
Standard | Standardcursor (normalerweise ein Pfeil) | ||||||||||||||||||||||||||||||||||
automatisch td > | Standard. Der vom Browser gesetzte Cursor. | ||||||||||||||||||||||||||||||||||
Fadenkreuz | Der Cursor wird als Fadenkreuz dargestellt. | ||||||||||||||||||||||||||||||||||
Zeiger | Der Cursor wird als Zeiger (eine Hand) dargestellt, der den Link anzeigt | ||||||||||||||||||||||||||||||||||
move | Dieser Cursor zeigt an, dass ein Objekt verschoben werden kann. | ||||||||||||||||||||||||||||||||||
e-resize | Dieser Cursor zeigt an, dass der Rand des rechteckigen Felds nach rechts (Osten) verschoben werden kann. | ||||||||||||||||||||||||||||||||||
ne-resize | Dieser Cursor zeigt an, dass der Rand des rechteckigen Felds nach oben und nach rechts (Norden/Osten) verschoben werden kann. | ||||||||||||||||||||||||||||||||||
nw-resize | Dieser Cursor zeigt an, dass der Rand des rechteckigen Felds nach oben und nach links (Norden/Westen) verschoben werden kann. | ||||||||||||||||||||||||||||||||||
n-resize | Dieser Cursor zeigt an, dass der Rand des rechteckigen Felds nach oben (Norden) verschoben werden kann. | ||||||||||||||||||||||||||||||||||
se-resize | Dieser Cursor zeigt an, dass der Rand des rechteckigen Felds nach unten und nach rechts (Süden/Osten) verschoben werden kann. | ||||||||||||||||||||||||||||||||||
sw-resize | Dieser Cursor zeigt an, dass der Rand des rechteckigen Felds nach unten und nach links (Süden/Westen) verschoben werden kann. | ||||||||||||||||||||||||||||||||||
s-resize | Dieser Cursor zeigt an, dass der Rand des rechteckigen Felds nach unten (Süden) verschoben werden kann. | ||||||||||||||||||||||||||||||||||
w-resize | Dieser Cursor zeigt an, dass der Rand des rechteckigen Felds nach links (Westen) verschoben werden kann. | ||||||||||||||||||||||||||||||||||
Text | Dieser Cursor zeigt Text an. | ||||||||||||||||||||||||||||||||||
Warten | Dieser Cursor zeigt an, dass das Programm beschäftigt ist (normalerweise eine Uhr oder eine Sanduhr). | ||||||||||||||||||||||||||||||||||
Hilfe | Dieser Cursor zeigt verfügbare Hilfe an (normalerweise ein Fragezeichen oder eine Sprechblase). |
3. Unterstützte Browser
Alle gängigen Browser unterstützen das Cursor-Attribut. Hinweis: Opera 9.3 und Safari 3 unterstützen den Wert<html> <body> <p>请把鼠标移动到单词上,可以看到鼠标指针发生变化:</p> <span style="cursor:auto">Auto</span><br /> <span style="cursor:crosshair">Crosshair</span><br /> <span style="cursor:default">Default</span><br /> <span style="cursor:pointer">Pointer</span><br /> <span style="cursor:move">Move</span><br /> <span style="cursor:e-resize">e-resize</span><br /> <span style="cursor:ne-resize">ne-resize</span><br /> <span style="cursor:nw-resize">nw-resize</span><br /> <span style="cursor:n-resize">n-resize</span><br /> <span style="cursor:se-resize">se-resize</span><br /> <span style="cursor:sw-resize">sw-resize</span><br /> <span style="cursor:s-resize">s-resize</span><br /> <span style="cursor:w-resize">w-resize</span><br /> <span style="cursor:text">text</span><br /> <span style="cursor:wait">wait</span><br /> <span style="cursor:help">help</span> </body> </html>Hinweis: Der Attributwert „inherit“ wird in keiner Version von Internet Explorer (einschließlich IE8) unterstützt.
Das obige ist der detaillierte Inhalt vonDefinition und Verwendung des CSS-Cursors. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!