如何通过CSS cursor属性实现独特的鼠标指针样式效果？

CSS cursor属性用于设置鼠标指针在元素上的形状。cursor: pointer;将指针更改为手形图标。

CSS cursor 属性 -鼠标指针样式效果

CSS的cursor属性用于定义当鼠标指针悬停在一个元素边界上时显示的光标形状，该属性可以显著提高用户界面的交互性和可用性，通过改变光标的外观来向用户提供视觉反馈。

基本语法

selector {
    cursor: value;
}

value可以是预定义的关键字或自定义的光标图像的URL。

常见值及其描述

值	描述
`url`	使用自定义光标的URL，需在列表末端定义一种普通光标以防URL不可用。
`default`	默认光标（通常是箭头）。
`auto`	浏览器设置的光标。
`crosshair`	光标呈现为十字线。
`pointer`	光标呈现为指示链接的指针（一只手）。
`move`	此光标指示某对象可被移动。
`e-resize`	此光标指示矩形框的边缘可被向右（东）移动。
`ne-resize`	此光标指示矩形框的边缘可被向上及向右移动（北/东）。
`nw-resize`	此光标指示矩形框的边缘可被向上及向左移动（北/西）。
`n-resize`	此光标指示矩形框的边缘可被向上（北）移动。
`se-resize`	此光标指示矩形框的边缘可被向下及向右移动（南/东）。
`sw-resize`	此光标指示矩形框的边缘可被向下及向左移动（南/西）。
`s-resize`	此光标指示矩形框的边缘可被向下移动（南）。
`w-resize`	此光标指示矩形框的边缘可被向左移动（西）。
`text`	此光标指示文本。
`wait`	此光标指示程序正忙（通常是一只表或沙漏）。
`help`	此光标指示可用的帮助（通常是一个问号或一个气球）。

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cursor Example</title>
    <style>
        .crosshair {
            cursor: crosshair;
        }
        .help {
            cursor: help;
        }
        .wait {
            cursor: wait;
        }
    </style>
</head>
<body>
    <p class="crosshair">Hover over me to see a crosshair cursor.</p>
    <p class="help">Hover over me to see a help cursor.</p>
    <p class="wait">Hover over me to see a wait cursor.</p>
</body>
</html>