cursor是什么?
发布网友
发布时间：2022-04-28 13:15
共5个回答
懂视网
时间：2022-04-28 17:37
首先我们来了解一下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文件）读取热点的坐标，或者将其设置为图像的左上角。
我们来看一个图像光标：
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
浏览器支持
支持以下版本：
*表示必需的前缀。
总结：
热心网友
时间：2022-04-28 14:45
获取或设置当鼠标指针位于控件上时显示的光标。
有兴趣的网友请继续看：
鼠标属性
我们知道，当把鼠标移动到不同的地方时，当鼠标需要执行不同的功能时，当系统处于不同的状态时，都会使鼠标的形状发生改变。
用CSS来改变鼠标的属性，就是当鼠标移动到不同的元素对象上面时，让鼠标以不同的形状、图案显示。
在CSS当中，这种样式是通过“cursor”属性来实现的。Cursor属性有很多的属性值，我们来看一下它的详细列表：
我们来看一个例子吧，请看下面这段代码：
<html>
<head>
<title>changemouse</title>
</head>
<body>
<h1 style=“font-family:文鼎新艺体简”>鼠标效果</h1>//*设置字体*//
<p style=“font-family:行书体；font-size:16pt；color:red”>
请把鼠标移到相应的位置观看效果。</p>//*设置字体的名称、大小、颜色*//
<div style=“font-family:行书体；font-size:24pt；color:green；”>
//*设置该区域内的字体名称、大小、绿色*//
<p><span style=“cursor:hand”>手的形状</span><br>
//*设置鼠标属性为手的形状*//
<span style=“cursor:move”>移动</span><br>//*设置鼠标属性为移动*//
<span style=“cursor:ne-resize”>反方向</span><br>
//*设置鼠标属性为反方向*//
<span style=“cursor:wait”>等待</span><br>//*设置鼠标属性为等待*//
<span style=“cursor:help”>求助</span>//*设置鼠标属性为求助*//
</p>
</div>
</body>
</html>
上述代码产生的效果请您点击：http://www.hongen.com/pc/homepage/css/sl/changemouse.htm
热心网友
时间：2022-04-28 16:03
热心网友
时间：2022-04-28 17:37
热心网友
时间：2022-04-28 19:29
