css改变鼠标样式

要在网页上改变鼠标的样式,你可以使用 CSS 的 cursor 属性。这个属性允许你为网页上的不同元素设置不同的鼠标指针样式。以下是一些常见的 cursor 属性值和使用示例:

常见的 cursor 属性值

  1. 默认指针

    • cursor: default;
    • 用于通常情况下的鼠标指针。
  2. 手形指针

    • cursor: pointer;
    • 通常用于表示可点击的链接或按钮。
  3. 文本选择指针

    • cursor: text;
    • 用于文本可选择的区域,例如文本框或链接上。
  4. 加载指针

    • cursor: wait;
    • 表示页面正在加载。
  5. 不允许指针

    • cursor: not-allowed;
    • 表示操作不被允许。
  6. 帮助指针

    • cursor: help;
    • 显示帮助的指针样式。
  7. 自定义指针

    • cursor: url('path-to-your-cursor-image'), auto;
    • 使用自定义的图片作为鼠标指针。auto 是备选方案,用于在图片无法加载时使用默认指针。

示例代码

默认样式
html 复制代码
div {
  cursor: default;
}
手形指针(常用于链接)
html 复制代码
a {
  cursor: pointer;
}
文本选择指针
html 复制代码
textarea, input[type="text"] {
  cursor: text;
}
加载指针
html 复制代码
.loading {
  cursor: wait;
}
不允许指针
html 复制代码
.disabled {
  cursor: not-allowed;
}
自定义指针
html 复制代码
.custom-cursor {
  cursor: url('https://example.com/path-to-cursor.png'), auto;
}

注意事项

  • 自定义指针的图像通常需要小于 32x32 像素,较大的图像可能无法被所有浏览器支持。
  • 如果自定义指针图像加载失败,浏览器会使用 auto 作为备选方案。

应用示例

如果你有一个按钮,希望在用户悬停时显示手形指针,可以这样写 CSS:

html 复制代码
button {
  cursor: pointer;
}

使用这些样式,你可以根据需要为网页上的不同元素设置合适的鼠标指针样式,提高用户的交互体验。

相关推荐
一颗松鼠3 分钟前
JavaScript 闭包是什么?简单到看完就理解!
开发语言·前端·javascript·ecmascript
小远yyds23 分钟前
前端Web用户 token 持久化
开发语言·前端·javascript·vue.js
吕彬-前端1 小时前
使用vite+react+ts+Ant Design开发后台管理项目(五)
前端·javascript·react.js
学前端的小朱1 小时前
Redux的简介及其在React中的应用
前端·javascript·react.js·redux·store
guai_guai_guai1 小时前
uniapp
前端·javascript·vue.js·uni-app
bysking2 小时前
【前端-组件】定义行分组的表格表单实现-bysking
前端·react.js
王哲晓3 小时前
第三十章 章节练习商品列表组件封装
前端·javascript·vue.js
fg_4113 小时前
无网络安装ionic和运行
前端·npm
理想不理想v3 小时前
‌Vue 3相比Vue 2的主要改进‌?
前端·javascript·vue.js·面试
酷酷的阿云3 小时前
不用ECharts!从0到1徒手撸一个Vue3柱状图
前端·javascript·vue.js