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属性的运用的细致内容,更多请关注 百分百源码网 其它相干文章!