css鼠标常用样式

在CSS中，你可以通过cursor属性来改变鼠标指针的样式。这个属性可以应用于任何HTML元素上，使得当鼠标悬停在该元素上时，鼠标指针会呈现出不同的样式。这对于提高用户体验和网页的互动性非常有帮助。

以下是一些常见的鼠标样式和用法示例：

1. 默认样式：

   .default { cursor: default; /* 默认光标 */ }

2. 指针样式：

   .pointer { cursor: pointer; /* 手形光标，用于可点击元素 */ }

3. 文本选择样式：

   .text { cursor: text; /* 文本选择光标 */ }

4. 等待样式：

   .wait { cursor: wait; /* 等待光标，通常用于加载状态 */ }

5. 自定义光标： 你也可以使用自定义图像作为光标：

   .custom { cursor: url('path/to/cursor.png'), auto; /* 指定自定义光标 */ }

6. 禁用样式：

   .not-allowed { cursor: not-allowed; /* 禁止光标 */ }

示例

以下是一个简单的示例，展示如何在不同元素上应用不同的鼠标样式：

<div class="default">这是默认光标</div>
<div class="pointer">这是指针光标</div>
<div class="text">这是文本光标</div>
<div class="wait">这是等待光标</div>
<div class="custom">这是自定义光标</div>
<div class="not-allowed">这是禁止光标</div>

div {
    padding: 20px;
    margin: 10px;
    border: 1px solid #ccc;
}

.pointer {
    cursor: pointer;
}

.text {
    cursor: text;
}

.wait {
    cursor: wait;
}

.custom {
    cursor: url('path/to/cursor.png'), auto;
}

.not-allowed {
    cursor: not-allowed;
}

小提示

• 自定义光标的图像通常建议使用小于 32x32 像素的 PNG 或 SVG 格式。
• 可以使用浏览器的开发者工具来快速测试和更改光标样式。