CSS 鼠标样式 cursor属性

版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/ixygj197875/article/details/79338360

在浏览网页时,通常看到的鼠标光标形状有箭头、手形、沙漏等,而在 windows 中实际看到的鼠标指针种类比这个还要多。

一般情况下,鼠标光标的形状由浏览器负责控制,大多数情况的光标形状为箭头形状,当指向链接时,光标形状会变成手指形状。

为了创建丰富的Web应用,CSS中提供了 cursor属性,允许设计师为页面上的任何元素自定义鼠标光标的形状。如,把鼠标光标样式设置为 row-resize,表示该对象可以被垂直改变尺寸:

  1. .resize {
  2.    cursor: row-resize;
  3. }

其实,早在CSS2时就已经支持 cursor属性了,不过当时提供的可选值相对较少。对于交互式Web应用来说,鼠标光标样式已经变得越来越重要。因此,CSS3对 cursor属性进行了扩展,并提供了更多的可选值,不同取值的含义、及在windows下的指针效果见表 4‑10:

表 4-10 cursor属性的取值、含义及图例
属性值含义图例
auto浏览器根据当前上下文,自动确定最适合的光标类型
default使用客户端操作系统的默认光标
none无光标
context-menu标示对象是上下文菜单
help标示有帮助信息存在
pointer竖起一只手指的手形光标
progress标示程序忙,但用户仍然可以与程序交互
wait标示程序忙,用户需要等待直到程序不忙为止
cell标示对象是单元格
crosshair简单的十字线光标
text标示可编辑的水平文本
vertical-text标示可编辑的垂直文本
alias标示对象的别名
copy标示对象可拷贝
move标示对象可被移动
no-drop标示被拖起的对象不允许在光标的当前位置被放下
not-allowed标示请求的操作不允许被执行
grab标示对象可以被抓取
grabbing标示对象正在被抓取
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标示对象可以被缩小

cursor属性的默认值为 auto, 它表示由浏览器根据当前上下文,自动确定最适合的光标类型。auto 与 default 不同,default 表示使用客户端操作系统默认的光标类型。

从上表可以看出,并非所有的光标类型都得到了支持,对于未支持的类型,则使用默认光标或由浏览器自动确定光标类型。

这显然不能满足所有用户的需求,特别对于一些追求时尚和个性化的Web应用。因此,CSS允许用户创建自己的鼠标光标图片,并保存为 .cur 的光标文件,然后通过 cursor属性来使用它们。如:

  1. cursor: url(cursors/cursor.cur) ;

上述规则表示,要求浏览器加载名称为 cursor.cur 光标文件,并将它用作鼠标光标。当然,浏览器也有可能不支持 .cur 格式的光标文件,或光标文件无法正常加载。因此,大多数浏览器要求必须指定一个备用的光标,否则,cursor属性无效。如:

  1. cursor: url(cursors/cursor.cur), pointer;

使用上述规则,在浏览器不支持 .cur 格式的光标文件,或光标文件无法正常加载时,就会使用 pointer 作为光标。

由于不同浏览器所支持的光标文件格式不尽相同,Opera和IE仅支持 .cur 格式,Firefox、Chrome和Safari既支持 .cur 格式,也支持常见的 .jpg、.gif、.jpg 等格式。因此,CSS还支持同时指定多个光标文件,中间用逗号隔开。如:

  1. cursor: url(cursors/cursor.cur), url(cursors/cursor.png), url(cursors/cursor.gif), pointer;

这样的话,浏览器会逐个查看各个URL,直到找到一个可用的光标文件。如果浏览器无法找到任何可用的文件,就会使用 pointer 作为光标。

关于作者

歪脖先生,十五年以上软件开发经验,酷爱Web开发,精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等,著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》,并全部在 GitHub 上开源。

展开阅读全文

没有更多推荐了,返回首页