10.1 cursor 属性
CSS 提供了通过 cursor 属性更改元素悬停时光标外观的功能。
这个属性可以设置各种类型的光标，从而提升网页的互动性和视觉吸引力。
cursor 属性定义了当鼠标悬停在元素上时光标的外观。值可以是预定义的或者是自定义的图片。
语法：
element {
cursor: value;
}
值：
cursor 属性支持许多值，可以分为预定义和自定义。
预定义值：
default: 默认光标pointer: 手形光标，一般用于链接text: 文本光标（I 形），通常用于文本框move: 移动光标wait: 等待光标，像沙漏或加载标志help: 问号光标crosshair: 十字光标not-allowed: 禁止符号光标（带斜杠的圆圈）grab和grabbing: 拖动光标
预定义值使用示例：
CSS
.default-cursor {
cursor: default;
padding: 10px;
border: 1px solid black;
}
.pointer-cursor {
cursor: pointer;
padding: 10px;
border: 1px solid black;
}
.text-cursor {
cursor: text;
padding: 10px;
border: 1px solid black;
}
HTML
<div class="default-cursor">默认光标</div>
<div class="pointer-cursor">手形光标</div>
<div class="text-cursor">文本光标</div>
10.2 自定义值（自定义光标）
cursor 属性也支持使用自定义图片作为光标。
为此，可以使用 url 值。
语法：
element {
cursor: url("custom-cursor.png"), fallback;
}
其中:
url('custom-cursor.png'): 指定光标图片的路径fallback: 当自定义图片无法加载时使用的预定义值
自定义光标使用示例：
CSS
.custom-cursor {
cursor: url('https://via.placeholder.com/32'), auto;
padding: 10px;
border: 1px solid black;
}
HTML
<body>
<div class="custom-cursor">自定义光标</div>
</body>
自定义光标规范和限制：
- 图片格式：支持
.cur,.png,.jpg,.gif格式。 - 图片尺寸：建议使用 32x32 像素或以下的图片，以提高性能和兼容性。
- 点击点坐标：可以在光标图片中指定点击点坐标（热点）。默认是左上角（0,0）。
10.3 使用自定义光标的详细信息
图片格式
自定义光标可以是多种格式，如 PNG, GIF, JPG 和 SVG。建议使用支持透明的格式（如 PNG），以确保光标在任何背景上都能正常显示。
图片尺寸
光标图片不应过大。推荐尺寸为 32x32 像素或更小。较大的图片可能在某些浏览器中显示不正确。
指定焦点坐标
可以通过在图片 URL 后添加额外的值来指定光标的焦点坐标（热点）。
语法
element {
cursor: url("custom-cursor.png") x y, fallback;
}
其中：
x和y: 相对于图片左上角的焦点坐标。
带焦点坐标使用示例：
CSS
.custom-cursor-focus {
cursor: url('https://via.placeholder.com/32') 16 16, auto;
padding: 10px;
border: 1px solid black;
}
HTML
<body>
<div class="custom-cursor-focus">带焦点的自定义光标</div>
</body>
代码说明：
.custom-cursor-focus: 设置带焦点坐标（16, 16）的自定义光标，使图片中心成为热点
实际应用：
- 提升 UI/UX: 使用自定义光标可以显著改善用户界面，使其更加直观和美观。
- 交互元素: 自定义光标可以应用于交互元素，如按钮、链接、图标等。
- 游戏和应用: 在游戏和网络应用中，自定义光标有助于创造独特的风格和氛围。
GO TO FULL VERSION