css中cursor有多少值

最新推荐文章于 2024-07-09 18:45:02 发布

程序人~

最新推荐文章于 2024-07-09 18:45:02 发布

阅读量896

点赞数 15

文章标签： css 前端

本文链接：https://blog.csdn.net/qq_41043186/article/details/138198253

版权

本文详细介绍了CSS中各种cursor属性的值，包括自动选择、默认、隐藏等27种不同的样式，以及它们在网页开发中的应用示例。

摘要由CSDN通过智能技术生成

css中cursor有多少值

auto：由浏览器自动决定适当的光标样式。
default：默认光标样式，通常是一个箭头。
none：隐藏光标，即不显示光标。
context-menu：表示上下文菜单应该出现，通常是一个小箭头。
help：表示指针提供帮助信息，通常是一个问号或一个问号加箭头。
pointer：表示链接，通常是一个手指。
progress：表示程序正在运行，通常是一个旋转的圆圈或一个沿着水平线移动的条。
wait：表示需要等待，通常是一个沙漏或一个旋转的圆圈。
…

运行下方代码清晰直观的了解这些值！！！

<!DOCTYPE html>
<html>
<head>
  <style>
    div {
      width: 200px;
      height: 200px;
      background-color: lightgray;
    }
  </style>
</head>
<body>
  <div style="cursor: auto;">Auto</div>
  <div style="cursor: default;">Default</div>
  <div style="cursor: none;">None</div>
  <div style="cursor: context-menu;">Context Menu</div>
  <div style="cursor: help;">Help</div>
  <div style="cursor: pointer;">Pointer</div>
  <div style="cursor: progress;">Progress</div>
  <div style="cursor: wait;">Wait</div>
  <div style="cursor: cell;">Cell</div>
  <div style="cursor: crosshair;">Crosshair</div>
  <div style="cursor: text;">Text</div>
  <div style="cursor: vertical-text;">Vertical Text</div>
  <div style="cursor: alias;">Alias</div>
  <div style="cursor: copy;">Copy</div>
  <div style="cursor: move;">Move</div>
  <div style="cursor: no-drop;">No Drop</div>
  <div style="cursor: not-allowed;">Not Allowed</div>
  <div style="cursor: e-resize;">East Resize</div>
  <div style="cursor: n-resize;">North Resize</div>
  <div style="cursor: ne-resize;">North East Resize</div>
  <div style="cursor: nw-resize;">North West Resize</div>
  <div style="cursor: s-resize;">South Resize</div>
  <div style="cursor: se-resize;">South East Resize</div>
  <div style="cursor: sw-resize;">South West Resize</div>
  <div style="cursor: w-resize;">West Resize</div>
  <div style="cursor: ew-resize;">East-West Resize</div>
  <div style="cursor: ns-resize;">North-South Resize</div>
  <div style="cursor: nesw-resize;">North East-South West Resize</div>
  <div style="cursor: nwse-resize;">North West-South East Resize</div>
  <div style="cursor: col-resize;">Column Resize</div>
  <div style="cursor: row-resize;">Row Resize</div>
  <div style="cursor: all-scroll;">All Scroll</div>
  <div style="cursor: zoom-in;">Zoom In</div>
  <div style="cursor: zoom-out;">Zoom Out</div>
</body>
</html>

程序人~

关注

15
点赞
踩
12

收藏

觉得还不错? 一键收藏
0
评论
css中cursor有多少值

progress：表示程序正在运行，通常是一个旋转的圆圈或一个沿着水平线移动的条。context-menu：表示上下文菜单应该出现，通常是一个小箭头。help：表示指针提供帮助信息，通常是一个问号或一个问号加箭头。wait：表示需要等待，通常是一个沙漏或一个旋转的圆圈。default：默认光标样式，通常是一个箭头。auto：由浏览器自动决定适当的光标样式。pointer：表示链接，通常是一个手指。运行下方代码清晰直观的了解这些值！none：隐藏光标，即不显示光标。
复制链接

扫一扫