CSS鼠标属性：光标

csscursor属性是鼠标的个人衣柜，它规定当鼠标指针悬停在元素上时显示的光标效果。它让您的用户知道他们可以执行什么样的操作，有点像数字交通信号灯。这是一个小细节，但却可以极大地增强您网站的用户体验！

句法

我们的属性的语法cursor是小菜一碟。

cursor: value;

默认情况下，光标采用该auto值，这使浏览器可以根据上下文决定显示哪个光标。

这种类似变色龙的属性可以应用于所有 html 元素，除了（请打鼓）…… <head>. 因此，每个可视 HTML 元素都是光标属性的游乐场。

虽然您可能希望让光标在屏幕上稍微摆动，但 CSS 动画不能应用于光标属性。所以，遗憾的是，没有跳舞的光标。

该cursor属性由子元素从其父元素继承。

让我们浏览一下cursor里的各种效果。

cursor: default;

这是您光标衣柜里的“日常牛仔裤和 T 恤”。这是光标的默认形状，通常是箭头。

正如您在上面的演示中所看到的，您可以使用很多很多关键字来显示各种情况下的特定光标：

CSS鼠标属性：光标第1张

使用下拉菜单切换鼠标悬停在 div 上时显示的鼠标光标类型：（点左边切换效果）

See the Pen Untitled by alade@163.com (@alade163com) on CodePen.

您还可以使用该url功能用图像自定义光标。是的，您的光标也可以佩戴图片！这就像您的光标的个人照片拍摄。

1    .element {    
2        cursor: url('cursor.png'), auto;    
3    }

请记住始终提供通用光标作为后备，例如auto，以防不支持自定义光标或特定关键字。

CSS 光标属性可以选择利用x坐标y来设置热点，即自定义光标图像中的确切点，该点将成为指针的位置，如下所示：

1    .element {    
2        cursor: url('custom.png') 4 12, auto;    
3    }

在此代码中，分别4 12是“custom.png”图像中热点的x和坐标；y这意味着光标的活动点距图像左侧 4 个像素，距图像顶部 12 个像素。

文章目录

句法

关键字值

演示

网址