一、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>

# css # swift # 前端
Logo
2048 AI社区

有“AI”的1024 = 2048，欢迎大家加入2048 AI社区

更多推荐

实验5：第一个 HarmonyOS 应用

描述实验过程中所遇到的问题，以及是如何解决的。有哪些收获和体会，对于课程的安排有哪些建议。遇到的问题及解决方案：环境配置问题：首次安装DevEco Studio时SDK下载缓慢解决方案：更换下载镜像源，使用国内镜像加速下载路由配置错误：手动创建页面后忘记在main_pages.json中添加路由解决方案：按照文档提示，在"src"数组中添加"pages/Second"收获与体会：通过本次实验，我成

avatar 2048 AI社区
cover

使用AI工具一句话生成PPT

avatar 2048 AI社区

从零理解 RAG：让大模型“带外脑”回答问题

大语言模型很会聊天，但它有两个弱点：容易胡编、知识不更新。而在电商客服、企业知识问答、医疗咨询等现实业务中，我们迫切需要模型能依据最新、真实的资料来给出准确回答。这时，RAG（Retrieval - Augmented Generation，检索增强生成）技术便应运而生，它就像给大模型插上了一块可以实时更新的 “外脑”，让模型具备了 “随用随查” 的能力。

avatar 2048 AI社区