CSS cursor 属性

1,292 阅读1分钟

用到 cursor 属性时总是忘记,在这里记录一下

原文链接: CSS cursor 属性---菜鸟教程

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</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:e-resize">e-resize</span><br>
    <span style="cursor:help">help</span><br>
    <span style="cursor:move">move</span><br>
    <span style="cursor:n-resize">n-resize</span><br>
    <span style="cursor:ne-resize">ne-resize</span><br>
    <span style="cursor:nw-resize">nw-resize</span><br>
    <span style="cursor:pointer">pointer</span><br>
    <span style="cursor:progress">progress</span><br>
    <span style="cursor:s-resize">s-resize</span><br>
    <span style="cursor:se-resize">se-resize</span><br>
    <span style="cursor:sw-resize">sw-resize</span><br>
    <span style="cursor:text">text</span><br>
    <span style="cursor:w-resize">w-resize</span><br>
    <span style="cursor:wait">wait</span><br>
    <span style="cursor:not-allowed">not-allowed</span><br>
    <span style="cursor: grab"> grab</span><br>
    <span style="cursor:zoom-in"> zoom-in</span><br>
</body>
</html>
  • cursor:auto image.png

  • cursor:crosshair image.png

  • cursor:default image.png

  • cursor:text image.png

  • cursor:e-resize image.png

  • cursor:help image.png

  • cursor:move image.png

  • cursor:n-resize image.png

  • cursor:ne-resize image.png

  • cursor:nw-resize image.png

  • cursor:pointer image.png

  • cursor:progress image.png

  • cursor:s-resize image.png

  • cursor:se-resize image.png

  • cursor:sw-resize image.png

  • cursor:w-resize image.png

  • cursor:wait image.png

  • cursor:not-allowed image.png

  • cursor: grab image.png

  • cursor:zoom-in (这是一个放大镜)

image.png

预览地址