首页 前端知识 css中cursor有多少值

css中cursor有多少值

2024-05-07 13:05:27 前端知识 前端哥 162 266 我要收藏

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>
转载请注明出处或者链接地址:https://www.qianduange.cn//article/7293.html
标签
评论
发布的文章

exceljs

2024-05-11 10:05:00

Java研学-JSON与AJAX

2024-05-10 22:05:37

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!