前面的话

  在浏览器中,光标对于提供交互反馈很有用。通过在不同的场景中改变光标,就能赋予其不同的含义

定义

  cursor光标

  值: [<uri>,]*[auto | default | pointer | crosshair | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize | text | wait | help | progress]] | inherit

  初始值: auto

  应用于: 所有元素

  继承性: 有

标准样式

  CSS2提供了相对较少的选择

url: 自定义光标的URL
default: 默认光标,通常是一个箭头
auto: 浏览器自动识别的光标
crosshair : 十字线
pointer: 手型指针
move: 移动指针
e-resize: 向东移动指针
ne-resize: 向东北移动指针
nw-resize: 向西北移动指针
n-resize: 向北移动指针
se-resize: 向东南移动指针
sw-resize: 向西南移动指针
s-resize: 向南移动指针
w-resize: 向西移动指针
text: 文本指针
wait: 指示程序正忙
help: 帮助指针

拓展样式

  CSS3增加了更多的cursor的样式值

  [注意]所有拓展样式IE7-浏览器都不支持

cursor:none (not IE8, Safari)
cursor:context-menu (not Safari,Firefox,Chrome)
cursor:cell (not Safari)
cursor:alias (not Safari)
cursor:copy (not IE,Safari)
cursor:grab (not IE,Safari,Chrome)
cursor:grabbing (not IE,Safari,Chrome)
cursor:zoom-in (not IE,Safari)
cursor:zoom-out (not IE,Safari)
cursor:vertical-text
cursor:no-drop
cursor:not-allowed
cursor:all-scroll
cursor:ew-resize
cursor:ns-resize
cursor:nesw-resize
cursor:nwse-resize
cursor:col-resize
cursor:row-resize

私有样式

  有些浏览器还提供了增加浏览器前缀的私有样式

  [注意]safari将-webkit-grab和-webkit-grabbing都解释为default

cursor:-webkit-grab; cursor: -moz-grab;
cursor:-webkit-grabbing; cursor: -moz-grabbing;
cursor:-webkit-zoom-in; cursor: -moz-zoom-in;
cursor:-webkit-zoom-out; cursor: -moz-zoom-out;

自定义样式

  所有浏览器都支持使用后缀名为.cur的文件,chrome、firefox、safari还支持使用普通图片制作光标

  [注意]使用URL自定义样式,后面必须跟有一个逗号和某个通用关键字

//错误
cursor: url('m.cur');
//正确
cursor: url('m.cur'),auto;

常见应用

  链接的默认光标是手型指针pointer,通过光标的变化可以让访问者清楚的知道该元素是可点击的

  元素的title属性用来提供元素的额外信息,配合help光标可以得到更好的表现方式

span[title]{
cursor: help;
border-bottom: 1px solid gray;
}
<div><span title="Cascading Style Sheets">CSS</span> is much too interesting</div>

CSS光标cursor的更多相关文章

  1. 自定义鼠标光标cursor

    通过css属性 Cursor:url()自定义鼠标光标. {cursor:url('图标路径'),default;} url是自定义鼠标图标路径 default指的是定义默认的光标(通常是一个箭头), ...

  2. CSS之cursor属性

    CSS之cursor属性 今天学习了CSS的cursor属性,第一篇博客就用来总结它吧. cursor属性用于控制光标的显示样式,可取的值有这些: cursor:url()*|{auto|defaul ...

  3. DIV css中cursor属性详解-鼠标移到图片变换鼠标形状 (转)

    css中cursor属性详解-鼠标移到图片变换鼠标形状   语法: cursor : auto | all-scroll | col-resize| crosshair | default | han ...

  4. button小手设置 css的cursor

    需要对元素的css属性cursor进行设置.cursor可能的值: default 默认(通常是一个箭头) auto 默认.浏览器设置的光标 crosshair 十字线形状. pointer 小手形状 ...

  5. CSS中cursor的pointer 与 hand(转)

    CSS中cursor的pointer 与 hand 转载 2015年12月25日 16:18:36 标签: cursorpointer / cursorhand 1781 cursor:hand 与 ...

  6. 光标显示样式 css 中 cursor 属性使用

    记录一下 cursor 的各种样式,方便自己查找.之前用到不常用的每次去 百度 或 Google 找不如自己记录下好找些. cursor光标类型 auto default none context-m ...

  7. 【css】cursor鼠标指针光标样式知识整理

    在前端开发中,我们经常需要对对象鼠标指针光标进行控制,比如鼠标经过超链接时变成手指形状.在这里整理一下cursor鼠标指针光标样式的知识,记录与方便以后查找. 1.常用cursor光标 div( cu ...

  8. css中cursor(光标类型)

    值 描述 url 需使用的自定义光标的 URL. 注释:请在此列表的末端始终定义一种普通的光标,以防没有由 URL 定义的可用光标. default 默认光标(通常是一个箭头) auto 默认.浏览器 ...

  9. CSS光标属性一览表

    光标类型 CSS 把你的光标放到相应文字上查看效果 要注意光标的实际效果依赖于用户的系统设置,与你在这里看到的效果并不一定一致. 十字准心 cursor: crosshair; 手 cursor: p ...

随机推荐

  1. 最小和(min)

    题目描述: N 个数排成一排,你可以任意选择连续的若干个数,算出它们的和.问该如何选择才能 使得和的绝对值最小. 如:N=8 时,8个数如下: 1    2    3     4    5    6 ...

  2. NPIO 导出记录

    http://www.cnblogs.com/qingyuan/archive/2012/11/08/2760034.html http://www.cnblogs.com/gaoshuai/arch ...

  3. 打包java项目为可执行程序(exe)

    一直都是编写了java程序后在控制台 javac --> java 命令运行,或者在eclipse中运行,今天突然想怎么可以写好了一个项目随处可以运行呢? 于是网上搜了步骤,跟着一步一步实现了, ...

  4. WebLogic 8.1 部署问题记录

    1.weblogic 8.1 不支持jdk1.4以上的版本,所以,如果在项目中用jdk1.4以上的版本编译之后的class直接部署到weblogic8.1 服务器上会报错,报错信息一般包括如下: Cl ...

  5. [leetcode 37]sudoku solver

    1 题目: 根据给出的数独,全部填出来 2 思路: 为了做出来,我自己人工做了一遍题目给的数独.思路是看要填的数字横.竖.子是否已经有1-9的数字,有就剔除一个,最后剩下一个的话,就填上.一遍一遍的循 ...

  6. maven自动编译脚本

    在maven工程根目录创建windows批处理脚本文件,例如tool.bat,内容如下 @echo off color 1f :menu echo -------------------------- ...

  7. Mroonga 3.0.8 发布,MySQL 存储引擎

    Mroonga 3.0.8 支持 REPAIR TABLE 支持损坏的 groonga 数据库. Mroonga 是一个 MySQL 存储引擎,基于 Groonga,提供完整的全文搜索引擎.

  8. Yii2 使用Composer

    composer 是 PHP 用来管理依赖(dependency)关系的工具.你可以在自己的项目中声明所依赖的外部工具库(libraries),Composer 会帮你安装这些依赖的库文件 compo ...

  9. asp.net linux 环境部署, jexus

    cd /tmpwget linuxdot.net/down/jexus-5.8.1-x64.tar.gztar -zxvf jexus-5.8.1-x64.tar.gzsudo mv jexus /u ...

  10. 如何重载delegate

    在写delegate的时候遇到一个问题,在已有一个不带参数的delegate基础上,试图再增加一个带参数的delegate,结果VS报了“already contains a definition f ...