手揣网教程/网站教程/内容

css的cursor属性是啥？cursor属性的使用

网站教程2024-10-06 阅读
[摘要]本篇文章给大家带来的内容是介绍css的cursor属性是什么？cursor属性的使用。有一定的参考价值，有需要的朋友可以参考一下，希望对你们有所帮助。首先我们来了解一下cursor属性是什么？有什么...
本篇文章给大家带来的内容是介绍css的cursor属性是什么？cursor属性的使用。有一定的参考价值，有需要的朋友可以参考一下，希望对你们有所帮助。

首先我们来了解一下cursor属性是什么？有什么作用？

cursor属性是css中的光标属性，它指定当鼠标位于应用元素上时可以使用的鼠标光标类型，即：规定要显示的光标的类型（形状）。

我们可以通过cursor属性将光标设置为许多预定义光标类型之一，或设置为图像（如下面的示例）。

注：cursor属性仅对具有指针设备（如鼠标）的设备有效。它对触控设备没有任何影响。

cursor属性用于向用户提供视觉反馈和提示，以便在元素上传送某种功能，对于提供更好的用户体验通常是重要的。

根据浏览器和操作系统，在CSS中定义的cursor值可以呈现不同的效果。例如，某些浏览器（例如Windows 7上的Firefox）将move（通常用于表示元素可拖动）光标显示为四向箭头，而其他浏览器（例如，在Mac OS X上的Firefox）将显示手形光标。在这种情况下，如果你希望光标是一个在所有浏览器和平台上看起来完全相同的特定光标，你可能需要使用图像而不是默认的CSS关键字。

官方语法

句法：

cursor: [ [<URI> ,]* [ 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: [ [ <URI> [<x> <y>]?,]* [ 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、图像光标（自定义光标）

<URI>：引用图像

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

cursor：url（例如1：.svg #linkcursor），url（例如2： .cur），auto ;
注：必须在回退列表的末尾提供 非URL标准的光标关键字。
<x> <y>：定义坐标
使用不加单位的数值，不允许使用负值；这些值指定光标热点的坐标。第一个数字是x坐标，第二个数字是y坐标。例如，以下内容：
cursor: url(some-cursor.png) 2 15, pointer;
将光标的热点设置为从左上角（0,0）开始的（2,15）像素。
如果未指定，则从文件本身（对于CUR和XBM文件）读取热点的坐标，或者将其设置为图像的左上角。
我们来看一个图像光标：
css的cursor属性是啥？cursor属性的使用
3、常用光标形状
none：定义光标不显示
通常呈现为箭头：default 、auto、context-menu
通常呈现为手型：pointer、grab、grabbing，hand
help：通常呈现为问号或气球
等待加载：progress（旋转的沙滩球，或带有手表或沙漏的箭头），wait（手表或沙漏）
表示方向或移动：
e-resize、ne-resize 、n-resize 、nw-resize 、w-resize 、 sw-resize 、s-resize 、se-resize、ew-resize 、ns-resize、nesw-resize 、nwse-resize 、col-resize、 row-resize、、all-scroll、move
表示禁止：no-drop 、not-allowed    
浏览器支持
支持以下版本：
css的cursor属性是啥？cursor属性的使用
*表示必需的前缀。
总结：以上就是本篇文的全部内容，大家可以自己动手编译，看看cursor属性的每个属性值定义的光标形状。希望能对大家的学习有所帮助，更多相关视频教程推荐：css3教程！
以上就是css的cursor属性是什么？cursor属性的使用的详细内容，更多请关注php中文网其它相关文章！
				
				
网站建设是一个广义的术语，涵盖了许多不同的技能和学科中所使用的生产和维护的网站。

……
标签:css的cursor属性是啥？cursor属性的运用
 
相关阅读