CSS cursor|极客教程

CSS cursor

CSS cursor 属性指定用户放在一个元素上时，鼠标指针应该展示的样式。这个属性可以用来为不同类型的元素设置不同的鼠标样式，以传达给用户该元素的功能或交互性。

基本语法

cursor 属性的基本语法如下：

element {
    cursor: value;
}

其中，element 可以是任何 HTML 元素，value 是指定鼠标样式的关键字或 URL。

常用属性值

关键字

auto：浏览器决定合适的鼠标样式。
default：标准的箭头光标。
pointer：手型光标，表示链接可点击。
wait：等待光标，表示正在加载或处理。
text：文本光标，表示可输入文本。
help：帮助光标，表示提供帮助信息。

URL

除了关键字外，cursor 属性还支持 URL 值，可以设置为自定义的光标样式。需要注意的是，不是所有浏览器都支持自定义光标样式。

.element {
    cursor: url('custom-cursor.png'), auto;
}

示例

以下是一个简单示例，展示如何使用 CSS cursor 属性为不同的元素设置不同的鼠标样式：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Cursor Example</title>
<style>
    .default-cursor {
        cursor: default;
    }
    .pointer-cursor {
        cursor: pointer;
    }
    .wait-cursor {
        cursor: wait;
    }
</style>
</head>
<body>
    <h1 class="default-cursor">Default Cursor</h1>
    <a href="#" class="pointer-cursor">Link with Pointer Cursor</a>
    <button class="wait-cursor">Button with Wait Cursor</button>
</body>
</html>

在这个示例中，h1 元素具有默认光标样式，a 元素具有手型光标样式，button 元素具有等待光标样式。用户在浏览页面时，将会看到不同的鼠标样式指示不同元素的功能。