Heim >Web-Frontend >CSS-Tutorial >So ändern Sie die Mausform mit CSS
So ändern Sie die Mausform mit CSS
- 王林Original
- 2021-05-20 14:54:122932Durchsuche
Die Möglichkeit, die Mausform in CSS zu ändern, besteht darin, das Cursorattribut zum angegebenen Element hinzuzufügen und den Attributwert auf den erforderlichen Wert festzulegen, z. B. Zeiger, Bewegung, Text usw. Der spezifische Code lautet wie folgt: [dafe97e1db6897cd114050e6a575c03bPointer54bdf357c58b8a65c66d7c19c8e4d114].
Die Betriebsumgebung dieses Artikels: Windows 10-System, CSS 3, Thinkpad T480-Computer.
CSS stellt uns ein sehr nützliches Attribut zur Verfügung, nämlich das Cursor-Attribut. Schauen wir uns dieses Attribut an. Das
cursor-Attribut gibt den Typ (die Form) des anzuzeigenden Cursors an.
Einige häufig verwendete Attributwerte:
default Standardcursor (normalerweise ein Pfeil)
auto Standard. Der vom Browser gesetzte Cursor.
Fadenkreuz Der Cursor erscheint als Fadenkreuz.
Zeiger Der Cursor erscheint als Zeiger (eine Hand) und zeigt den Link an.
move Dieser Cursor zeigt an, dass ein Objekt 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).
Codebeispiel:
<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>
Sie können das Obige kopieren und lokal ausführen, um den spezifischen Laufeffekt zu sehen.
Verwandte Videofreigabe: CSS-Video-Tutorial
Das obige ist der detaillierte Inhalt vonSo ändern Sie die Mausform mit CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!