css鼠标常用样式

pink大呲花2024-09-20 9:59

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

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

默认样式：

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

指针样式：

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

文本选择样式：

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

等待样式：

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

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

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

禁用样式：

.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 格式。
可以使用浏览器的开发者工具来快速测试和更改光标样式。