文章目录
鼠标样式:cursor属性值(含自定义光标图案) - 代码篇1. 常用取值 · 举例:2. 更多取值 · 截图参考 `(部分图标显示,因电脑系统而异)`:3. 自定义cursor图片:附:demo.html 效果查看鼠标样式:cursor属性值(含自定义光标图案) - 代码篇
1. 常用取值 · 举例:
2. 更多取值 · 截图参考(部分图标显示,因电脑系统而异)
:
对应解释 · 如下表所示:
3. 自定义cursor图片:
body {cursor: url(/css/default.cur),default;}a, button, img {cursor: url(/css/pointer.cur),default;}
附:demo.html 效果查看
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> cursor属性值(光标图案)</title> </head><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>
以上就是关于“ cursor光标图案 - 代码篇 ” 的全部内容。