語法
游標cursor
Setting the mouse cursor style.
Overview
| Class | Declarations |
|---|---|
cursor:value | cursor: value;
|
cursor:none | cursor: none;
|
cursor:auto | cursor: auto;
|
cursor:default | cursor: default;
|
cursor:pointer | cursor: pointer;
|
cursor:text | cursor: text;
|
cursor:move | cursor: move;
|
cursor:vertical-text | cursor: vertical-text;
|
cursor:alias | cursor: alias;
|
cursor:all-scroll | cursor: all-scroll;
|
cursor:cell | cursor: cell;
|
cursor:col-resize | cursor: col-resize;
|
cursor:row-resize | cursor: row-resize;
|
cursor:context-menu | cursor: context-menu;
|
cursor:copy | cursor: copy;
|
cursor:crosshair | cursor: crosshair;
|
cursor:grab | cursor: grab;
|
cursor:grabbing | cursor: grabbing;
|
cursor:n-resize | cursor: n-resize;
|
cursor:e-resize | cursor: e-resize;
|
cursor:s-resize | cursor: s-resize;
|
cursor:w-resize | cursor: w-resize;
|
cursor:ne-resize | cursor: ne-resize;
|
cursor:nw-resize | cursor: nw-resize;
|
cursor:se-resize | cursor: se-resize;
|
cursor:sw-resize | cursor: sw-resize;
|
cursor:ew-resize | cursor: ew-resize;
|
cursor:ns-resize | cursor: ns-resize;
|
cursor:nesw-resize | cursor: nesw-resize;
|
cursor:nwse-resize | cursor: nwse-resize;
|
cursor:no-drop | cursor: no-drop;
|
cursor:not-allowed | cursor: not-allowed;
|
cursor:progress | cursor: progress;
|
cursor:wait | cursor: wait;
|
cursor:zoom-in | cursor: zoom-in;
|
cursor:zoom-out | cursor: zoom-out;
|
Basic usage
Set the cursor style
Use the cursor:pointer to change the mouse cursor when hovering an element.
Hovering the block to see the cursor style
<div class="cursor:pointer">Hover Me</div>Conditionally apply
Apply styles based on different states using selectors and applying conditionally.
<div class="cursor:pointer:hover cursor:pointer@sm cursor:pointer@dark cursor:pointer@print">…</div>