CSS光标cursor - 小火柴的蓝色理想

×

目录

[1]定义 [2]标准样式 [3]拓展样式 [4]私有样式 [5]定义样式 [6]常见应用

前面的话

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

 

定义

　　cursor光标

　　值: [,]*[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提供了相对较少的选择

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

拓展样式

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

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

<span style="color: #000000;">cursor:none (not IE8, Safari)
cursor:context</span>-<span style="color: #000000;">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</span>-<span style="color: #0000ff;">in</span><span style="color: #000000;"> (not IE,Safari)
cursor:zoom</span>-<span style="color: #0000ff;">out</span><span style="color: #000000;"> (not IE,Safari)
cursor:vertical</span>-<span style="color: #000000;">text
cursor:no</span>-<span style="color: #000000;">drop
cursor:not</span>-<span style="color: #000000;">allowed
cursor:all</span>-<span style="color: #000000;">scroll
cursor:ew</span>-<span style="color: #000000;">resize
cursor:ns</span>-<span style="color: #000000;">resize
cursor:nesw</span>-<span style="color: #000000;">resize
cursor:nwse</span>-<span style="color: #000000;">resize
cursor:col</span>-<span style="color: #000000;">resize
cursor:row</span>-resize

私有样式

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

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

cursor:-webkit-grab; cursor: -moz-<span style="color: #000000;">grab;
cursor:</span>-webkit-grabbing; cursor: -moz-<span style="color: #000000;">grabbing;
cursor:</span>-webkit-zoom-<span style="color: #0000ff;">in</span>; cursor: -moz-zoom-<span style="color: #0000ff;">in</span><span style="color: #000000;">;
cursor:</span>-webkit-zoom-<span style="color: #0000ff;">out</span>; cursor: -moz-zoom-<span style="color: #0000ff;">out</span>;    

自定义样式

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

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

<span style="color: #008000;">//</span><span style="color: #008000;">错误</span>
cursor: url(<span style="color: #800000;">'</span><span style="color: #800000;">m.cur</span><span style="color: #800000;">'</span><span style="color: #000000;">);
</span><span style="color: #008000;">//</span><span style="color: #008000;">正确</span>
cursor: url(<span style="color: #800000;">'</span><span style="color: #800000;">m.cur</span><span style="color: #800000;">'</span>),auto;

常见应用

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

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

<span style="color: #800000;">span[title]</span>{<span style="color: #ff0000;">
    cursor</span>:<span style="color: #0000ff;"> help</span>;<span style="color: #ff0000;">
    border-bottom</span>:<span style="color: #0000ff;"> 1px solid gray</span>;
}

<span style="color: #0000ff;"><span style="color: #800000;">div</span><span style="color: #0000ff;">><span style="color: #800000;">span </span><span style="color: #ff0000;">title</span><span style="color: #0000ff;">="Cascading Style Sheets"</span><span style="color: #0000ff;">></span>CSS<span style="color: #0000ff;"></span><span style="color: #800000;">span</span><span style="color: #0000ff;">></span> is much too interesting<span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span></span></span>