详解CSS中cursor属性实例代码

零下一度

发布时间：2017-06-09 11:17:30

3034人浏览过

来源于php中文网

原创

CSS之cursor属性

今天学习了css的cursor属性，第一篇博客就用来总结它吧。

cursor属性用于控制光标的显示样式，可取的值有这些：

cursor:url()*|{auto|default|pointer|crosshair|text|vertical-text|help|not-allowed|no-drop|move|e-reszie|s-resize|w-resize|w-resize|n-resize|all-scroll|ne-resize|se-resize|nw-resize|sw-resize|col-resize|row-resize|}

*表示至少写一个该值，url后面可再选{}内的一个值。

 1 
 2 
 3 
 4     
 5     CSS之cursor属性
 6     
34 
35 
36      百度
37      指示和选择光标
38      auto:浏览器默认
39      default：操作系统默认光标
40      hand:手型
41      text：大写的I，水平文本选择
42      vertical-text：大写的I，垂直文本选择
43      help：箭头加问号，获取帮助
44      pointer：手形，表示链接
45      not-allowed：红色圆圈和斜杠，禁止操作
46      no-drop：红色圆圈和斜杠，无法释放
47      crosshair：十字瞄准，表示精确选择
48      
49      表程序状态
50      wait：选转环，表示等待直到不忙，不能交互
51      progress：箭头加旋转环，处理中，可以交互
52      
53      
54      move用于移动对象
55      move：移动对象，两端带箭头的十字
56      all-scroll：移动
57      在四个角上改变窗口大小
58      ne-resize：向东（右）或/和北（上）
59      sw-resize：向西（左）或/和南（下）
60      nw-resize：向西（左）或/和北（上）
61      se-resize：向东（右）或/和南（下）
62      
63      在四条边上改变窗口大小
64      东西用于改变水平宽度
65      e-resize：向东（右）
66      w-resize：向西（左）
67      南北用于改变垂直高度
68      s-resize：向南（下）
69      n-resize：向北（上）
70      col-resize：改变列宽
71      row-resize：改变行高 
72 
73

CSS之cursor属性0

CSS之cursor属性1

立即学习“前端免费学习笔记（深入）”；

名扬银河企业建站源码2.0.2

名扬银河企业建站系统，适用于无代码基础的新手，快速搭建企业网站，程序内置了多项实用功能及插件，能够便捷的对网站进行修改、调整、优化等方面进行操作。【部分功能介绍】1、产品管理发布企业产品信息，管理企业产品，自定义产品封面图，产品详情图、文、视频，产品扩展属性自定义等。2、案例管理系统发布企业成功案例，管理成功案例，自定义案例封面图，案例详情图、文、视频，案例扩展属性自定义等。3、资讯管理系统发布企

下载

CSS之cursor属性2

CSS之cursor属性3

还有几个属性值没有弄清楚：hand url col-resize row-resize 弄清楚了再在修改博客。

第一次写博客，各种不熟悉。学的也不够扎实，欢迎指正。

css 浮动布局容易出现哪些经典问题_通过常见错误场景总结

css项目实战_开发一个简单的企业介绍页面

css颜色值的透明度控制_rgba与hsla的使用方法

css::before内容不显示怎么办_确保content属性正确设置

css如何用flex实现垂直居中_让子元素纵向居中对齐

相关标签:

css

本站声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：css中background-position属性用法总结下一篇：CSS-cursor属性与用法总结

作者最新文章

分享一个sqlyog连接数据库乱码的问题以及解决方法

2018-05-29 10:51

详细介绍Spring boot 添加jsp支持配置的实例

2018-05-29 11:07

.net Elasticsearch入门实例详解

2018-05-29 11:16

Catalog Service - 解析微软微服务架构实例代码

2018-05-29 15:31

使用Java中可变长参数的实例

2018-05-29 09:20

NameValuePair方式传参数实例教程

2018-05-30 14:39

JS怎么检测window.open打开的窗口是否关闭？

2018-05-29 11:00

使用dom4j解析xml文档实例

2018-05-29 17:57

最新的高德地图API WEB开发实例教程

2018-05-28 17:32

AJAX的优点和缺点

2018-05-28 17:19

热门AI工具

DeepSeek

幻方量化公司旗下的开源大模型平台

AI 编程开发 AI 聊天问答

豆包大模型

字节跳动自主研发的一系列大型语言模型

AI 编程开发 AI大模型

通义千问

阿里巴巴推出的全能AI助手

AI 编程开发 Agent智能体

腾讯元宝

腾讯混元平台推出的AI助手

文档处理 AI 聊天问答

文心一言

文心一言是百度开发的AI聊天机器人，通过对话可以生成各种形式的内容。

AI 编程开发 AI 文本写作

讯飞写作

基于讯飞星火大模型的AI写作工具，可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

AI 文本写作中文写作

即梦AI

一站式AI创作平台，免费AI图片和视频生成。

图片拼接

ChatGPT

最最强大的AI聊天机器人程序，ChatGPT不单是聊天机器人，还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

AI 编程开发 AI 文本写作

智谱清言 - 免费全能的AI助手

AI 编程开发 Agent智能体

相关专题

Python 序列化

本专题整合了python序列化、反序列化相关内容，阅读专题下面的文章了解更多详细内容。

2026.02.02

AO3官网入口与中文阅读设置 AO3网页版使用与访问

本专题围绕 Archive of Our Own（AO3）官网入口展开，系统整理 AO3 最新可用官网地址、网页版访问方式、正确打开链接的方法，并详细讲解 AO3 中文界面设置、阅读语言切换及基础使用流程，帮助用户稳定访问 AO3 官网，高效完成中文阅读与作品浏览。

2026.02.02

主流快递单号查询入口实时物流进度一站式追踪专题

本专题聚合极兔快递、京东快递、中通快递、圆通快递、韵达快递等主流物流平台的单号查询与运单追踪内容，重点解决单号查询、手机号查物流、官网入口直达、包裹进度实时追踪等高频问题，帮助用户快速获取最新物流状态，提升查件效率与使用体验。

2026.02.02

Golang WebAssembly（WASM）开发入门

本专题系统讲解 Golang 在 WebAssembly（WASM）开发中的实践方法，涵盖 WASM 基础原理、Go 编译到 WASM 的流程、与 JavaScript 的交互方式、性能与体积优化，以及典型应用场景（如前端计算、跨平台模块）。帮助开发者掌握 Go 在新一代 Web 技术栈中的应用能力。

2026.02.02