搜索文档
首页
HTML/CSS
JavaScript
服务端开发
Java教程
移动端
数据库
当前位置:
首页
HTML/CSS
CSS 参考手册
CSS 属性大全
源代码
清空
点击运行
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>CSS cursor光标属性示例</title> <style> a { cursor: url("/static/lib/images/custom.gif"), url("/static/lib/images/custom.cur"), default; } .cursor-demo span{ min-width: 100px; padding: 5px 10px; margin-bottom: 5px; display: inline-block; border: 1px solid grey; border-radius: 3px; } </style> </head> <body> <h1>自定义光标</h1> <p>将鼠标指针<a href="#">放在我上方</a>以显示自定义光标.</p> <hr> <h2>更多光标样式</h2> <p>将鼠标指针放在方框上以显示光标.</p> <div class="cursor-demo"> <span style="cursor: auto;">auto</span> <span style="cursor: default;">default</span> <span style="cursor: none;">none</span> <span style="cursor: context-menu;">context-menu</span> <span style="cursor: help;">help</span> <span style="cursor: pointer;">pointer</span> <span style="cursor: progress;">progress</span> <span style="cursor: wait;">wait</span> <span style="cursor: cell;">cell</span> <span style="cursor: crosshair;">crosshair</span> <span style="cursor: text;">text</span> <span style="cursor: vertical-text;">vertical-text</span> <span style="cursor: alias;">alias</span> <span style="cursor: copy;">copy</span> <span style="cursor: move;">move</span> <span style="cursor: no-drop;">no-drop</span> <span style="cursor: not-allowed;">not-allowed</span> <span style="cursor: grab;">grab</span> <span style="cursor: grabbing;">grabbing</span> <span style="cursor:e-resize">e-resize</span> <span style="cursor: n-resize;">n-resize</span> <span style="cursor: ne-resize;">ne-resize</span> <span style="cursor: nw-resize;">nw-resize</span> <span style="cursor: s-resize;">s-resize</span> <span style="cursor: se-resize;">se-resize</span> <span style="cursor: sw-resize;">sw-resize</span> <span style="cursor: w-resize;">w-resize</span> <span style="cursor: ew-resize;">ew-resize</span> <span style="cursor: ns-resize;">ns-resize</span> <span style="cursor: nesw-resize;">nesw-resize</span> <span style="cursor: nwse-resize;">nwse-resize</span> <span style="cursor: col-resize;">col-resize</span> <span style="cursor: row-resize;">row-resize</span> <span style="cursor: all-scroll;">all-scroll</span> <span style="cursor: zoom-in;">zoom-in</span> <span style="cursor: zoom-out;">zoom-out</span> </div> </body> </html>
运行结果
