css3中cursor属性怎么改变光标的形状

这篇文章主要为大家展示了“css3中cursor属性怎么改变光标的形状”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“css3中cursor属性怎么改变光标的形状”这篇文章吧。

让客户满意是我们工作的目标,不断超越客户的期望值来自于我们对这个行业的热爱。我们立志把好的技术通过有效、简单的方式提供给客户,将通过不懈努力成为客户在信息化领域值得信任、有价值的长期合作伙伴,公司提供的服务项目有:申请域名、虚拟空间、营销软件、网站建设、柘城网站维护、网站推广。

首先我们来看看cursor属性是如何改变光标形状的。

css3cursor属性的基本语法:

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、cursor属性适用于所有元素;

2、cursor属性仅对具有指针设备(如鼠标)的设备有效;它对触控设备没有任何影响。

3、并非所有浏览器都支持cursor属性的所有属性值,且所有属性值在所有浏览器和操作系统中显示的效果不一定相同。

下面我们来看看cursor属性的这些属性值可以设置怎样的光标形状。

图像游标(自定义游标)

一个或多个逗号分隔的url()用来指向要用作光标的图像。用户代理从第一个中检索游标url()。如果用户代理无法处理游标列表的第一个游标,则必须尝试处理游标列表等。如果用户代理无法处理任何提供的图像(请参阅浏览器支持),则必须使用游标关键字。列表的末尾。可选的坐标标识图像中指针位置(即热点)的确切位置。

必须在回退列表的末尾提供非URL标准游标关键字。

使用小于32的无单位数字,不允许使用负值。这些值指定光标热点的坐标。第一个数字是x坐标,第二个数字是y坐标。

例:

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

下面我们来看看图像游标的示例:

css代码:

.custom{

cursor:url(http://tympanus.net/codrops-playground/assets/images/cssref/properties/cursor/clock-cursor.png),url(http://tympanus.net/codrops-playground/assets/images/cssref/properties/cursor/clock-cursor.cur),pointer;

}

通用光标(箭头状)

default:默认光标,通常箭头。

auto:根据当前上下文确定要显示的光标。例如,text当文本悬停时显示。

none:不为元素呈现光标显示光标。

例:

.auto{

cursor:auto;

}

.default{

cursor:default;

}

.none{

cursor:none;

}

1.gif

链接和状态游标

context-menu:光标下的对象可以使用上下文菜单。通常呈现为箭头,旁边有一个类似菜单的小图形。

只有IE10及更高版本在Windows上实现了这一功能。

help:此光标通常呈现为问号或气球。它表示光标下的对象可以使用帮助。

pointer:光标是指示链接的指针。

progress:进度指标。表示程序正在执行某些处理,但不同之处wait在于用户仍可以与程序进行交互。通常呈现为旋转的沙滩球,或带有手表或沙漏的箭头。

wait:此光标通常呈现为手表或沙漏。它表示程序正忙,用户应该等待。

例:

.context-menu{

cursor:context-menu;

}

.help{

cursor:help;

}

.pointer{

cursor:pointer;

}

.progress{

cursor:progress;

}

.wait{

cursor:wait;

}

2.gif

选择光标

cell:此光标通常呈现为粗加号,中间有一个点。它表示可以选择一个单元或一组单元。

crosshair:简单的十字准线(例如,类似于“+”符号的短线段)。通常用于表示二维位图选择模式。

text:

该光标通常呈现为垂直工字梁。用户代理可以自动显示vertical-text垂直文本的水平工字梁/光标(例如与关键字相同),或者就此而言,任何角度的工字梁/光标用于以任何特定角度渲染的文本。它表示可以选择的文本。

vertical-text:该光标通常呈现为水平工字梁。它表示可以选择的垂直文本。

例:

.cell{

cursor:cell;

}

.crosshair{

cursor:crosshair;

}

.text{

cursor:text;

}

.vertical-text{

cursor:vertical-text;

}

3.gif

拖放光标

alias:此光标通常呈现为箭头,旁边有一个小弯曲箭头。它表示要创建的某个别名/快捷方式。

copy:此光标通常呈现为箭头,旁边有一个小加号。它表明要复制的东西。

move:表示要移动的东西。渲染此光标的方式取决于浏览器,如上面的描述中所述。它通常呈现为四向箭头或类似手的形状。

no-drop:此光标通常呈现为手形或指针,带有一个小圆圈,并带有一条直线。它表示无法在当前光标位置删除拖动的项目。

not-allowed:此光标通常呈现为一个圆圈,并带有一条直线。它表示不会执行请求的操作。

例:

.alias{

cursor:alias;

}

.copy{

cursor:copy;

}

.move{

cursor:move;

}

.no-drop{

cursor:no-drop;

}

.not-allowed{

cursor:not-allowed;

}

4.gif

缩放光标:

zoom-in(放大)、zoom-out(缩小):

表示某些内容可以放大或缩小,并且通常在玻璃中心呈现为带有“+”或“-”的放大镜。

例:

.zoom-in{

cursor:-webkit-zoom-in;

cursor:zoom-in;

}

.zoom-out{

cursor:-webkit-zoom-out;

cursor:zoom-out;

}

5.gif

抓取光标

grab、grabbing:

表示可以抓取元素(拖动以移动)。grab是一只开放的手“准备拖动”,并且dragging是一只看起来像抓住东西的“闭合”手。

例:

.grab{

cursor:-webkit-grab;

cursor:grab;

}

.grabbing{

cursor:-webkit-grabbing;

cursor:grabbing;

}

7.gif

缩放和滚动游标

e-resize,n-resize,ne-resize,nw-resize,s-resize,se-resize,sw-resize,w-resize

表示要移动某些边缘。例如,se-resize当运动从开始使用光标东南部盒子的角落。

ew-resize,ns-resize,nesw-resize,nwse-resize

表示双向调整大小游标。这些光标类型通常在不同方向上呈现为双向箭头。

col-resize:

此光标通常呈现为左右箭头,并用垂直条分隔它们。它表示可以水平调整项目/列的大小。它类似于您在MSExcel等程序中看到的光标。

row-resize:

此光标通常呈现为向上和向下的箭头,水平条将它们分开。它表示可以垂直调整项目/行的大小。它类似于您在MSExcel等程序中看到的光标。

all-scroll:

此光标通常呈现为向上,向下,向左和向右的箭头,中间有一个点。它表示可以向任何方向滚动某些内容。

例:

.n-resize{

cursor:n-resize;

}

.ne-resize{

cursor:ne-resize;

}

.e-resize{

cursor:e-resize;

}

.se-resize{

cursor:se-resize;

}

.s-resize{

cursor:s-resize;

}

.sw-resize{

cursor:sw-resize;

}

.w-resize{

cursor:w-resize;

}

.nw-resize{

cursor:nw-resize;

}

.se-resize{

cursor:se-resize;

}

.ew-resize{

cursor:ew-resize;

}

.ns-resize{

cursor:ns-resize;

}

.nesw-resize{

cursor:nesw-resize;

}

.nwse-resize{

cursor:nwse-resize;

}

.col-resize{

cursor:col-resize;

}

.row-resize{

cursor:row-resize;

}

.all-scroll{

cursor:all-scroll;

}

以上是“css3中cursor属性怎么改变光标的形状”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!


当前题目:css3中cursor属性怎么改变光标的形状
网页地址:http://pwwzsj.com/article/ghihsh.html