百分百源码网-让建站变得如此简单! 登录 注册 签到领金币!

主页 | 如何升级VIP | TAG标签

当前位置: 主页>网站教程>CSS教程> css的cursor属性有哪些?cursor属性的运用
分享文章到:

css的cursor属性有哪些?cursor属性的运用

发布时间:08/01 来源:未知 浏览: 关键词:
?本篇文章给大家带来的内容是介绍css的cursor属性有哪些?cursor属性的运用。有一定的参照 价值,有需要的伴侣可以参照 一下,但愿对你们有所帮忙。 本篇文章给大家带来的内容是介绍css的cursor属性有哪些?cursor属性的运用。有一定的参照 价值,有需要的伴侣可以参照 一下,但愿对你们有所帮忙。

第一我们来理解一下cursor属性有哪些?有什么作用?

cursor属性是css中的光标属性,它指定当鼠标位于利用元素上时可以运用的鼠标光标类型,即:规定要显示的光标的类型(外形)。

我们可以通过cursor属性将光标设定为很多预定义光标类型之一,或设定为图像(如下面的示例)。

注:cursor属性仅对拥有指针设施(如鼠标)的设施有效。它对触控设施没有任何影响。

cursor属性用于向会员供给视觉反应和提醒,以便在元素上传送某种功能,关于供给更好的会员体验平常是重要的。

依据阅读器和操纵系统,在CSS中定义的cursor值可以呈现不一样的结果。例如,某些阅读器(例如Windows 7上的Firefox)将move(平常用于表示元素可拖动)光标显示为四向箭头,而其他阅读器(例如,在Mac OS X上的Firefox)将显示手形光标。在这种状况下,要是你但愿光标是一个在所有阅读器和平台上看起来完全雷同的特定光标,你可能需要运用图像而不是默许的CSS关键字。

官方语法

句法:

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

初始:主动

适用于:所有元素

动画:没有

新的CSS3语法:

在CSS3中,已向cursor属性增加了其他值和选项,下面我们来看看:

cursor: [ [  [ ]?,]* [ 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 ] ];

注明:

1、并非所有阅读器都支撑上述所有的值,而且并非所有值在所有阅读器和操纵系统中看起来都雷同。

2、图像光标(自定义光标)

:援用图像

一个或多个逗号分隔的url()指向要用作光标的图像。

cursor:url(例如1:.svg #linkcursor),url(例如2: .cur),auto ;

注:必需在回退列表的末尾供给 非URL规范的光标关键字。

:定义坐标

运用不加单位的数值,不允许运用负值;这些值指定光标热点的坐标。首先个数字是x坐标,第二个数字是y坐标。例如,下列内容:

cursor: url(some-cursor.png) 2 15, pointer;

将光标的热点设定为从左上角(0,0)开端的(2,15)像素。

要是未指定,则从文件自身(关于CUR和XBM文件)读取热点的坐标,或者将其设定为图像的左上角。

我们来看一个图像光标:

*表示必须的前缀。

总结:以上就是本篇文的全部内容,大家可以本人动手编译,看看cursor属性的每个属性值定义的光标外形。但愿能对大家的学习有所帮忙,更多相干视频教程举荐:css3教程!

以上就是css的cursor属性有哪些?cursor属性的运用的细致内容,更多请关注 百分百源码网 其它相干文章!

打赏

打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

百分百源码网 建议打赏1~10元,土豪随意,感谢您的阅读!

共有150人阅读,期待你的评论!发表评论
昵称: 网址: 验证码: 点击我更换图片
最新评论

本文标签

广告赞助

能出一分力是一分吧!

订阅获得更多模板

本文标签

广告赞助

订阅获得更多模板