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 格式。
  • 可以使用浏览器的开发者工具来快速测试和更改光标样式。
相关推荐
若梦plus3 分钟前
Babel中微内核&插件化思想的应用
前端·babel
若梦plus6 分钟前
微前端中微内核&插件化思想的应用
前端
若梦plus8 分钟前
服务化架构中微内核&插件化思想的应用
前端
若梦plus13 分钟前
Electron中微内核&插件化思想的应用
前端·electron
若梦plus13 分钟前
Vue.js中微内核&插件化思想的应用
前端
qq_419854051 小时前
css 发射烟花的动画
前端·css·css3
liliangcsdn1 小时前
`npm error code CERT_HAS_EXPIRED‘ 问题
前端·npm·node.js
Rattenking1 小时前
【npm 解决】---- TypeError: crypto.hash is not a function
前端·npm·哈希算法
qq_429499571 小时前
备忘录记事本 任务清单 html
css·html·css3
石小石Orz2 小时前
Vue新技巧:<style>标签里的 CSS 也能响应式!
前端