1

1

cursor CSS属性定义鼠标指针悬浮在元素上时的外观。

https://developer.mozilla.org/zh-CN/docs/Web/CSS/cursor

概述

cursor CSS属性定义鼠标指针悬浮在元素上时的外观。

初始值 auto
适用元素 all elements
是否是继承属性 yes
适用媒体 visual, interactive
计算值 as specified, but with URIs made absolute
是否适用于 CSS 动画
正规顺序 the unique non-ambiguous order defined by the formal grammar

语法

如何阅读 CSS 语法。

Formal syntax: [ [ <uri> [<x> <y>]?,]* [ auto | default | none | context-menu | help | pointer | progress | wait | cell | crosshair | text | vertical-text | alias | copy | move | no-drop | not-allowed | e-resize | n-resize | ne-resize | nw-resize | s-resize | se-resize | sw-resize | w-resize | ew-resize | ns-resize | nesw-resize | nwse-resize | col-resize | row-resize | all-scroll | zoom-in | zoom-out | grab | grabbing ] ]

<uri>
url(…)或者逗号分隔的url(…), url(…), …,指向图片文件。用大于一个<uri>值提供后备,以防某些指针图片类型不被支持。最后必须提供一个非URL后备值。详情参见cursor属性中使用URL值
<x> <y> 
可选 x,y坐标。无单位数字。
关键字值

鼠标悬浮于值上测试效果:

类型 CSS值   描述
General auto  

浏览器根据当前内容决定指针样式
例如当是内容是文字时使用text样式

default 默认指针,通常是箭头。
none   无指针被渲染
链接及状态 context-menu 指针下有可用内容目录。只有windows中的IE 10有效。
help 指示帮助
pointer 悬浮于连接上时,通常为手
progress 程序后台繁忙,用户仍可交互 (与wait不同).
wait 程序繁忙(沙漏或表)
选择 cell 指示单元格可被选中
crosshair 交叉指针,通常指示位图中的框选
text 指示文字可被选中
vertical-text 指示垂直文字课被选中
拖拽 alias 复制或快捷方式将要被创建
copy 指示可复制
move 被悬浮的物体可被移动
no-drop 当前位置不能扔下
bug 275173Windows中 "no-drop 与not-allowed相同".
not-allowed 不能执行
重设大小及滚动 all-scroll 元素可任意方向滚动 (平移).
bug 275174Windows中, "all-scroll 与 move相同".
col-resize 元素可被重设宽度。通常被渲染为中间有一条竖线分割的左右两个箭头
row-resize

元素可被重设高度。通常被渲染为中间有一条横线分割的上下两个箭头

n-resize 某条边将被移动。例如元素盒的东南角被移动时使用se-resize
e-resize
s-resize
w-resize
ne-resize
nw-resize
se-resize
sw-resize
ew-resize 指示双向重新设置大小
ns-resize
nesw-resize
nwse-resize
缩放 zoom-in

指示可被放大或缩小

zoom-out
Mozilla特定关键字
Grab -moz-grab 元素可被抓起

不推荐在公开网页上使用这些指针。

使用自定图片指针会提供更好的浏览器兼容性

-moz-grabbing 元素被握住

示例

查看在线演示

.foo { cursor: crosshair; }

/* use prefixed-value if "zoom-in" isn't supported */
.bar { cursor: -webkit-zoom-in; cursor: -moz-zoom-in; cursor: zoom-in; } /* standard cursor value as fallback for url() must be provided (doesn't work without) */
.baz { cursor: url(hyper.cur), auto }

规范

规范 状态 备注
CSS Basic User Interface Module Level 3
cursor
Candidate Recommendation 增加了一些关键字,位置语法及url()
CSS Level 2 (Revision 1)
cursor
Recommendation 首次定义

浏览器兼容性

Feature Chrome (WebKit) Firefox (Gecko) Internet Explorer Opera Safari
autocrosshairdefaultmovetextwait,helpn-resizee-resizes-resizew-resize,ne-resizenw-resizese-resizesw-resize 1.0 1.0 (1.0) 4.0 7.0 1.2
hand (just use pointer for this purpose) 未实现 未实现 4.0 未实现 未实现
pointerprogress 1.0 1.0 (1.0|1.7) 6.0 7.x 1.2 | 3.0
url() - See Using URL values 1.0 (523) 1.5 (1.8)
On MacOs 4.0 (2.0).
6.0 未实现 3.0
Positioning syntax for url() values  ? (Yes) 未实现 ? ?
not-allowedno-dropvertical-textall-scrollcol-resizerow-resize 1.0 (522) 1.5 (1.8) 6.0 10.6 3.0
aliascellcopyew-resizens-resizenesw-resizenwse-resizecontext-menu 1.0 (522 )[1] 1.5 (1.8 )[1] 未实现 10.6 [1] 3.0 [2]
none 5.0 (533) 3.0 (1.9) 9.0 未实现 5.0 [2]
inherit 1.0 1.0 8.0 9.0 1.2
zoom-inzoom-out  1.0 (522) -webkit- 1.0 (1.4) -moz- 未实现 11.6 3.0 -webkit-

[1] Windows中的Mozilla和WebKit不适用context-menu , Opera中可用。
[2] aliascellcopynone 在Windows Safari不适用, Mac中可用。

参见

1

1

1

1

1

1

1

1

1

1

1

1

1

cursor CSS属性定义鼠标指针悬浮在元素上时的外观。的更多相关文章

  1. CSS属性定义 文本修饰 边框效果 背景修饰

    一.CSS属性定义1.css颜色表示方法[重点]rgb(红绿蓝3个颜色通道 强度值为0-255)rgb(0,0,0)rgba(alpha a是透明度 值为0-1)rgba(123,123,123,0) ...

  2. [WPF]获取鼠标指针下的元素

    原文:[WPF]获取鼠标指针下的元素   [WPF]获取鼠标指针下的元素 周银辉 以前写过一些GetElementUnderMouse之类的函数,要用到坐标换算而显得有些麻烦(特别是当元素有XXXTr ...

  3. VC/MFC 当鼠标移到控件上时显示提示信息

    VC/MFC 当鼠标移到控件上时显示提示信息 ToolTip是Win32中一个通用控件,MFC中为其生成了一个类CToolTipCtrl,总的说来其使用方法是较简单的,下面讲一下它的一般用法和高级用法 ...

  4. 使用 jQuery 操作页面元素的方法,实现浏览大图片的效果,在页面上插入一幅小图片,当鼠标悬停到小图片上时,在小图片的右侧出现与之相对应的大图片

    查看本章节 查看作业目录 需求说明: 使用 jQuery 操作页面元素的方法,实现浏览大图片的效果,在页面上插入一幅小图片,当鼠标悬停到小图片上时,在小图片的右侧出现与之相对应的大图片 实现思路: 在 ...

  5. Unity编辑器 - 鼠标悬停在控件上时改变鼠标样式

    Unity编辑器 - 鼠标悬停在控件上时改变鼠标样式 摘自Unity文档 EditorGUIUtility.AddCursorRect public static void AddCursorRect ...

  6. echarts柱状图修改背景线为网格线、去掉刻度标签、鼠标悬停在柱条上时变色、柱条圆角弧度、

    option = { color: ['red'],//修改柱条颜色 tooltip : { triggerOn:'mousemove' }, grid: { left: '3%', right: ' ...

  7. 【转】使用Eclipse,将鼠标放在相应方法或字段等元素上时,无法显示提示

    使用Eclipse编写java代码时,将鼠标放在相应方法或字段等元素上时,会有对应的说明或提示. 不过,常出现下面的问题: Note:An exception occurred while getti ...

  8. CSS/HTML 改变鼠标指针形状

    改变鼠标指针形状的方法有两种:第一种:用的来改变鼠标指针形状.另一种是:利用第三方控件的方法,而我自己最常用的是第一种:用css样式表来改变鼠标指针形状 我们先来看第一种:用来改变鼠标指针形状. 有些 ...

  9. javascript - ie - css - 动态更新鼠标指针形状

    最近写了一个图片展示的页面,在弹出层中显示大图,在大图的左边和右边点击时可以翻页. 将鼠标在大图上移动时,移动到左边显示一个向左的箭头,移动到右边时显示一个向右的箭头. 当第一次显示大图时,如果鼠标位 ...

随机推荐

  1. 转 Jmeter测试实践:文件下载接口

    Jmeter测试实践:文件下载接口   一 Jmeter步骤 1.打开jmeter4.0,新建测试计划,添加线程组.根据实际情况配置线程属性. 2.添加HTTP请求.根据接口文档进行配置. Basic ...

  2. STL_常用的算法

    STL_常用的算法 一.常用的查找算法 adjacent_find() adjacent_find(iterator beg, iterator end, _callback); 在iterator对 ...

  3. DNS是如何工作的?

    今天很多人都在讲域名系统和互联网作为一个整体是如何工作的,域名系统---也就是大家所熟知的DNS.不幸的是,对于天龙人和普通人来说,他们并不了解DNS到底是什么鬼.今天就来聊聊DNS,和那些想了解DN ...

  4. JavaFx ObservableList的使用详解

    原文地址:JavaFx ObservableList的使用详解 | Stars-One的杂货小窝 最近在研究MVVM模式,发现可以将之前写的FxRecyclerView控件改造一下,便是开始尝试,尝试 ...

  5. WPF权限控制——【1】界面布局

    本来就不怎么喜欢写博客,好不容易申请了博客园的账号,迈出了先前没有跨越的第一步:转眼间几年的时间就过去了,还是空空如也.今天的心境是这样的,发现wpf相关的资料及源码实在不多,就想写下随笔:一方面是自 ...

  6. (Oracle)关于blob转到目标库报ORA-01461: 仅能绑定要插入 LONG 列的 LONG 值错误解决方案

    在数据抽取时,开发需要clob类型的数据,但是目标库类型是blob类型的,于是抽取的时候报错: ORA-01461: 仅能绑定要插入 LONG 列的 LONG 值错误 可能有以下几种原因: 可能有以下 ...

  7. JS小整理

    禁止右键和复制 $(document).ready( function() { document.body.oncontextmenu = document.body.ondragstart = do ...

  8. MVC架构 项目实践

    MVC MVC架构程序的工作流程 springmvc 中dao层和service层的区别 项目实践 项目目录 项目实现流程 JSP登录页面View层 LoginServletjavaControlle ...

  9. Java 实现Redis客户端,服务端

    Java 实现Redis客户端,服务端 1.Java实现Redis发布订阅 1.1实例 2.[Redis]Java实现redis消息订阅/发布(PubSub) 3.java实现 redis的发布订阅 ...

  10. GeoMesa命令行,索引概述

    GeoMesa 一.GeoMesa命令行 查看classpath 创建表 描述表 批量导入数据 解释查询 统计分析 导出feature 删除feature 获取目录中的全部表的名称 删除表 删除目录 ...