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 格式。
  • 可以使用浏览器的开发者工具来快速测试和更改光标样式。
相关推荐
祈祷苍天赐我java之术30 分钟前
CSS 进阶用法
前端·css
2501_915106324 小时前
移动端网页调试实战,iOS WebKit Debug Proxy 的应用与替代方案
android·前端·ios·小程序·uni-app·iphone·webkit
柯南二号5 小时前
【大前端】React Native 调用 Android、iOS 原生能力封装
android·前端·react native
睡美人的小仙女1276 小时前
在 Vue 前端(Vue2/Vue3 通用)载入 JSON 格式的动图
前端·javascript·vue.js
yuanyxh6 小时前
React Native 初体验
前端·react native·react.js
大宝贱6 小时前
H5小游戏-超级马里奥
javascript·css·html·h5游戏·超级马里奥
程序视点6 小时前
2025最佳图片无损放大工具推荐:realesrgan-gui评测与下载指南
前端·后端
程序视点7 小时前
2023最新HitPaw免注册版下载:一键去除图片视频水印的终极教程
前端
小只笨笨狗~9 小时前
el-dialog宽度根据内容撑开
前端·vue.js·elementui
weixin_490354349 小时前
Vue设计与实现
前端·javascript·vue.js