2025年css各种鼠标形状设置

科技前沿 • 2025-03-30 23:18 • 阅读 22

大家好，我是讯享网，很高兴认识大家。

css各种鼠标形状设置

css设置鼠标形状常用样式：
Cursors：
auto（普通箭头）
default（普通箭头）
none（消失）
context-menu（普通箭头）
help（箭头+问号）
pointer（手型）
progress（箭头+转圈加载中）
wait（转圈加载中）
cell（加号）
crosshair（十字架）
text（文本竖线）
vertical-text（文本横线）
alias（箭头+小箭头）
copy（箭头+加号）
move（移动箭头）
no-drop（红色禁止符号）
not-allowed（红色禁止符号）
all-scroll（移动箭头）
col-resize（左右箭头和双竖线）
row-resize（上下箭头和双竖线）
n-resize（上下箭头）
s-resize（上下箭头）
e-resize（左右箭头）
w-resize（左右箭头）
ns-resize（上下箭头）
ew-resize（左右箭头）
ne-resize（斜向箭头）
nw-resize（斜向箭头）
se-resize（斜向箭头）
sw-resize（斜向箭头）
nesw-resize（斜向箭头）
nwse-resize（斜向箭头）

讯享网

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css3手型集合</title> <style> .auto { 
    cursor: auto; } .deafult { 
    cursor: default; } .none { 
    cursor: none; } .context-menu { 
    cursor: context-menu; } .help { 
    cursor: help; } .pointer { 
    cursor: pointer; } .progress { 
    cursor: progress; } .wait { 
    cursor: wait; } .cell { 
    cursor: cell; } .crosshair { 
    cursor: crosshair; } .text { 
    cursor: text; } .vertical-text { 
    cursor: vertical-text; } .alias { 
    cursor: alias; } .copy { 
    cursor: copy; } .move { 
    cursor: move; } .no-drop { 
    cursor: no-drop; } .not-allowed { 
    cursor: not-allowed; } .all-scroll { 
    cursor: all-scroll; } .col-resize { 
    cursor: col-resize; } .row-resize { 
    cursor: row-resize; } .n-resize { 
    cursor: n-resize; } .e-resize { 
    cursor: e-resize; } .s-resize { 
    cursor: s-resize; } .w-resize { 
    cursor: w-resize; } .ns-resize { 
    cursor: ns-resize; } .ew-resize { 
    cursor: ew-resize; } .ne-resize { 
    cursor: ne-resize; } .nw-resize { 
    cursor: nw-resize; } .se-resize { 
    cursor: se-resize; } .sw-resize { 
    cursor: sw-resize; } .nesw-resize { 
    cursor: nesw-resize; } .nwse-resize { 
    cursor: nwse-resize; } .cursors > div { 
    float: left; box-sizing: border-box; width: 20%; padding: 10px 2px; text-align: center; white-space: nowrap; &:nth-child(even) { 
    background: #eee; } &:hover { 
    opacity: 0.25 } } </style> </head> <body> <h1>Cursors</h1> <div class="cursors"> <div class="auto">auto</div> <div class="default">default</div> <div class="none">none</div> <div class="context-menu">context-menu</div> <div class="help">help</div> <div class="pointer">pointer</div> <div class="progress">progress</div> <div class="wait">wait</div> <div class="cell">cell</div> <div class="crosshair">crosshair</div> <div class="text">text</div> <div class="vertical-text">vertical-text</div> <div class="alias">alias</div> <div class="copy">copy</div> <div class="move">move</div> <div class="no-drop">no-drop</div> <div class="not-allowed">not-allowed</div> <div class="all-scroll">all-scroll</div> <div class="col-resize">col-resize</div> <div class="row-resize">row-resize</div> <div class="n-resize">n-resize</div> <div class="s-resize">s-resize</div> <div class="e-resize">e-resize</div> <div class="w-resize">w-resize</div> <div class="ns-resize">ns-resize</div> <div class="ew-resize">ew-resize</div> <div class="ne-resize">ne-resize</div> <div class="nw-resize">nw-resize</div> <div class="se-resize">se-resize</div> <div class="sw-resize">sw-resize</div> <div class="nesw-resize">nesw-resize</div> <div class="nwse-resize">nwse-resize</div> </div> </body> </html>

讯享网

2025年css各种鼠标形状设置

css各种鼠标形状设置

相关推荐