在本教程中，我们将看到如何在CSS中使用其属性更改光标样式。有很多选项可将这些光标用于网页上的特定元素。

• 光标
• 浏览器特定的游标
• 自定义光标

光标

cursor 的CSS属性指定当鼠标指针悬停在元素上时显示的鼠标光标。

在本教程中，我们将看到CSS光标属性，正如您期望的那样，当鼠标悬停在元素上时，该属性可让您更改光标样式。对于使用户与网络应用进行交互，这一点变得越来越重要。光标显示符号和符号以对元素执行任何操作。

让我们看看游标属性的一些样式。

.auto            { cursor: auto; }
.default         { cursor: 默认; }
.none            { cursor: none; }
.context-menu    { cursor: context-menu; }
.help            { cursor: help; }
.pointer         { cursor: pointer; }
.progress        { cursor: progress; }
.wait            { cursor: wait; }
.cell            { cursor: cell; }
.crosshair       { cursor: crosshair; }
.text            { cursor: text; }
.vertical-text   { cursor: vertical-text; }
.alias           { cursor: alias; }
.copy            { cursor: copy; }
.move            { cursor: move; }
.no-drop         { cursor: no-drop; }
.not-allowed     { cursor: not-allowed; }
.all-scroll      { cursor: all-scroll; }
.col-resize      { cursor: col-resize; }
.row-resize      { cursor: row-resize; }
.n-resize        { cursor: n-resize; }
.e-resize        { cursor: e-resize; }
.s-resize        { cursor: s-resize; }
.w-resize        { cursor: w-resize; }
.ns-resize       { cursor: ns-resize; }
.ew-resize       { cursor: ew-resize; }
.ne-resize       { cursor: ne-resize; }
.nw-resize       { cursor: nw-resize; }
.se-resize       { cursor: se-resize; }
.sw-resize       { cursor: sw-resize; }
.nesw-resize     { cursor: nesw-resize; }
.nwse-resize     { cursor: nwse-resize; }

您可以为要在元素悬停时显示的任何元素设置光标样式。

看笔 的CSS中游标的属性 由rehmaanali（@geekstrick） 上 密码笔.

浏览器支持

该浏览器支持数据来自 我可以用吗，其中有更多详细信息。数字表示浏览器支持该版本及更高版本的功能。

注意： 的CSS不会应用于移动浏览器

浏览器特定的游标

Mozilla以及某些版本的Chrome和Safari提供了许多供应商前缀的光标样式，这些样式可能会成为CSS3规范的一部分：

.-moz-grab       { cursor: -webkit-grab; cursor: -moz-grab; }
.-moz-grabbing   { cursor: -webkit-grabbing; cursor: -moz-grabbing; }
.-moz-zoom-in    { cursor: -webkit-zoom-in; cursor: -moz-zoom-in; }
.-moz-zoom-out   { cursor: -webkit-zoom-out; cursor: -moz-zoom-out; }

这是用于浏览器的WebKit，其中包含其他功能，如您在演示中所见

看笔 的CSS中游标的属性–浏览器特定的游标 由rehmaanali（@geekstrick） 上 密码笔.

浏览器支持

该浏览器支持数据来自 我可以用吗，其中有更多详细信息。数字表示浏览器支持该版本及更高版本的功能。

注意： 的CSS不会应用于移动浏览器

自定义光标

最后，您可以创建自己的光标图形，例如

.one {
   cursor:url(http://cursors2.totallyfreecursors.com/thumbnails/1pointer31.gif), auto; 
     }
.two { 
   cursor:url(http://cursors0.totallyfreecursors.com/thumbnails/1pointer51.gif), auto; 
     }
.three {
   cursor:url(http://www.cursor.cc/cursor/263/42/cursor.png), auto; 
     }

这将从链接中加载图像并显示为光标，让我们看一下演示

看笔 的CSS中光标的属性–图形光标 由rehmaanali（@geekstrick） 上 密码笔.

• Internet Explorer需要Windows光标文件（.cur）。
• 火狐浏览器，Chrome和Safari需要图片-我建议使用24位的Alpha透明PNG。
• 火狐浏览器还需要第二个非URL游标后备值。
• 歌剧不支持此功能。
• x和y是Firefox，Chrome和Safari中的可选属性，它们定义了图形左上角的精确指针位置。如果省略，则假定为0 0。

获取更多CSS 这里！