html5如何使用cursor,CSS属性参考 | cursor

最新推荐文章于 2024-06-06 10:56:30 发布

糕图图

最新推荐文章于 2024-06-06 10:56:30 发布

阅读量2.1k

点赞数 1

文章标签： html5如何使用cursor

CSS cursor属性用于指定当鼠标滑过某个元素时显示的鼠标光标样式。

鼠标的光标可以设置为某种预定义的光标样式，或者使用图片作为鼠标的光标。

cursor属性只在支持鼠标光标的设备上才有效果，在移动设备上是没有效果的。

提供各种鼠标光标的样式是为了更好的用户体验。例如当鼠标滑过某个超链接或按钮时，鼠标光标会变为一个小手的样式。或者在可以进行分隔拖拽的地方，将鼠标显示为row-resize样式。这样当用户看到某种光标时，就可以知道此时可以进行什么样相应的操作。

在CSS中定义的鼠标光标样式由浏览器和操作系统提供支持。同一个CSS cursor属性关键字渲染出来的光标样式，在不同的操作系统或浏览器上可能会显示出不同的形态。如果你想光标可以跨浏览器显示相同的样式，最好使用图片来作为鼠标的光标。

官方语法

新的CSS3语法添加了一些新的值和选项，语法如下：

参数：

按照类型和作用，可以将光标分成不同的类别。

图片光标

：指定作为光标的图片url()地址，可以使用逗号分隔多张图片的url()地址。浏览器会使用第一张图片作为鼠标光标，如果浏览器不支持第一张图片，则会尝试使用第二张图片作为光标，以此类推。如果所有的图片都不能使用，则浏览器使用参数列表最后的光标关键字作为光标。例如：

cursor: url(img/cursor.jpg), url(cursor.cur), auto;

可选的,参数用于指定光标热点位于图片上的精确位置。

通用类型光标

auto：由浏览器根据当前内容来决定显示哪种光标。

default：

默认的光标，通常是一个箭头。

none：不显示光标。

链接和状态光标

context-menu：

上下文菜单光标。只有IE10以上的IE浏览器可见。

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：

：指示正在进行抓取操作。

cursor属性的初始值为auto。

应用范围

cursor属性可以应用在所有元素上。

示例代码

例如如果一个按钮处于不可用状态时，可以将滑过它的鼠标光标设置为not-allowed。

button {

cursor: not-allowed;

}

使用图片作为光标，图片可以是svg格式，cur格式，或jpg格式等。

:link,

:visited {

cursor: url(example.svg#linkcursor), url(hyper.cur), pointer;

}

在线演示

下面的例子演示了所有可用光标的取值，你可以使用鼠标滑过相应的元素来看看光标的效果。

图片光标

通用光标

auto

default

none

链接和状态光标

context-menu(IE10+)

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

浏览器支持

cursor属性的浏览器兼容性如下图所示：

Firefox/Mac, Safari/Mac, Chrome/Mac不支持PNG格式和JPG格式的图片光标。IE仅支持CUR格式的图片光标。

抓取操作和缩放操作的几个光标在webkit内核浏览器和Firefox浏览器中需要前缀-webkit-和-moz-的支持。

IE浏览器不支持自定义图片光标时使用x,y坐标。

IE9及以下的IE浏览器在解析图片光标的相对路径时，路径是相对于HTML文档，而不是CSS文件。因此为了做到跨浏览器兼容性，最好使用绝对路径来设置图片光标：

.element {

cursor: url('/path/to/my-cursorr.cur'), move;

}

或者为IE浏览器提供回退代码：

element{

cursor: url('../path/to/my-cursorr.cur'), /* 现代浏览器 */

url('/path/to/my-cursorr.cur'), /* IE浏览器 */

move;

}