CSS cursor属性详解：控制鼠标指针样式的实用指南基础指针值：如default（默认）、pointer（可点击）、text（输入状态）等系统交互值：wait（加载中）、progress（处理

星空下的DeppBing

于 2025-08-20 09:15:00 发布

阅读量65

点赞数 2

CC 4.0 BY-SA版权

分类专栏： css Html 文章标签： css swift 前端

本文链接：https://blog.csdn.net/DeppBing/article/details/150484641

css 同时被 2 个专栏收录

4 篇文章

订阅专栏

Html

2 篇文章

订阅专栏

一、cursor 属性概述

cursor 用来设置鼠标指针悬停在元素上时显示的光标样式。

它的作用：

提示用户元素的交互性（例如按钮、链接）。
提升用户体验（例如加载中状态显示等待光标）。
增强可视化效果（例如放大镜、拖拽手势）。

语法：

selector { cursor: value; }

二、常见取值分类

1. 基础指针

值	效果	使用场景
`default`	默认箭头	常规元素
`pointer`	小手图标	链接、按钮、可点击区域
`text`	文本输入光标（I 型）	输入框、可选文字区域
`not-allowed`	圆圈禁止符号	禁用按钮、不可点击元素

2. 系统交互相关

值	效果	使用场景
`wait`	沙漏/转圈	页面加载中
`progress`	箭头+转圈	正在处理，可同时操作
`help`	带问号	提示说明区域

3. 移动与拖拽

值	效果	使用场景
`move`	四向箭头	可拖动元素
`grab`	抓取手势	可拖拽区域（现代浏览器支持）
`grabbing`	抓取中	正在拖动时

4. 调整大小

值	效果	使用场景
`resize` 系列	双箭头	改变元素大小
`n-resize`	上下箭头	垂直调整
`s-resize`	下箭头	垂直调整
`e-resize`	右箭头	水平调整
`w-resize`	左箭头	水平调整
`ne-resize`	↗	右上角拖动
`nw-resize`	↖	左上角拖动
`se-resize`	↘	右下角拖动
`sw-resize`	↙	左下角拖动

5. 特殊图标（跨浏览器支持有限）

值	效果	使用场景
`alias`	小箭头+快捷方式	链接快捷方式
`copy`	十字+加号	拷贝操作
`crosshair`	十字光标	画布绘制、精确选择
`zoom-in`	放大镜	图片放大
`zoom-out`	缩小镜	图片缩小
`col-resize`	左右箭头	调整列宽
`row-resize`	上下箭头	调整行高

三、自定义光标

可以使用自定义图片作为光标：

.custom-cursor {
  cursor: url('cursor.png') 4 12, auto;
}

url('cursor.png')：光标图片路径。
4 12：热点坐标（光标点击的精确点），从左上角算起。
auto：备用光标，当图片无效时使用默认箭头。

四、综合示例 Demo

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>CSS Cursor 属性 Demo</title>
  <style>
    body {
      font-family: Arial;
      display: flex;
      flex-wrap: wrap;
      gap: 20px;
    }
    div {
      width: 120px;
      height: 80px;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 1px solid #ccc;
      border-radius: 5px;
      background: #f0f0f0;
    }
    .pointer { cursor: pointer; }
    .text { cursor: text; }
    .not-allowed { cursor: not-allowed; }
    .wait { cursor: wait; }
    .move { cursor: move; }
    .grab { cursor: grab; }
    .grabbing { cursor: grabbing; }
    .zoom-in { cursor: zoom-in; }
    .zoom-out { cursor: zoom-out; }
    .crosshair { cursor: crosshair; }
    .custom { cursor: url('https://cdn-icons-png.flaticon.com/512/32/32339.png') 16 16, auto; }
  </style>
</head>
<body>

  <div class="pointer">pointer</div>
  <div class="text">text</div>
  <div class="not-allowed">not-allowed</div>
  <div class="wait">wait</div>
  <div class="move">move</div>
  <div class="grab">grab</div>
  <div class="grabbing">grabbing</div>
  <div class="zoom-in">zoom-in</div>
  <div class="zoom-out">zoom-out</div>
  <div class="custom">custom</div>
  <div style="cursor: progress;">progress</div>
  <div style="cursor: help;">help</div>
  <div style="cursor: n-resize;">n-resize</div>
  <div style="cursor: s-resize;">s-resize</div>
  <div style="cursor: e-resize;">e-resize</div>
  <div style="cursor: w-resize;">w-resize</div>

  
  <div style="cursor: ne-resize;">ne-resize</div>
  <div style="cursor: nw-resize;">nw-resize</div>
  <div style="cursor: se-resize;">se-resize</div>
  <div style="cursor: sw-resize;">sw-resize</div>

  <div style="cursor: alias;">alias</div>
  <div style="cursor: copy;">copy</div>
  <div style="cursor: crosshair;">crosshair</div>
  <div style="cursor: col-resize;">col-resize</div>
  <div style="cursor: row-resize;">row-resize</div>


</body>
</html>