html cursor

作者：卍…`傷` 发布日期:2025-04-09 浏览:93

<!DOCTYPE html>
<html>
<head>
    <style>
        /* 设置整个页面的光标样式 */
        body {
            cursor: url('cursor.cur'), auto;
        }

        /* 鼠标悬停在特定元素上的光标样式 */
        .custom-cursor {
            cursor: pointer;
        }

        /* 更多自定义光标样式 */
        .help-cursor {
            cursor: help;
        }

        .wait-cursor {
            cursor: wait;
        }

        .text-cursor {
            cursor: text;
        }
    </style>
</head>
<body>

<p>将鼠标移动到不同元素上查看不同的光标样式：</p>

<div class="custom-cursor">点击我！</div>
<div class="help-cursor">需要帮助？</div>
<div class="wait-cursor">请稍等...</div>
<div class="text-cursor">文本选择区域</div>

</body>
</html>

解释说明：

cursor: url('cursor.cur'), auto;：为整个页面设置了一个自定义光标（使用 url('cursor.cur') 指定光标的路径），如果该光标无法加载，则回退到默认光标（auto）。
.custom-cursor { cursor: pointer; }：当鼠标悬停在带有 custom-cursor 类的元素上时，光标会变成手型（通常用于表示可点击的元素）。
.help-cursor { cursor: help; }：当鼠标悬停在带有 help-cursor 类的元素上时，光标会变成问号形状，表示提供帮助信息。
.wait-cursor { cursor: wait; }：当鼠标悬停在带有 wait-cursor 类的元素上时，光标会变成沙漏或等待图标，表示操作正在进行中。
.text-cursor { cursor: text; }：当鼠标悬停在带有 text-cursor 类的元素上时，光标会变成竖线形状，表示可以进行文本选择。

上一篇：html在线生成

下一篇：html 背景颜色