🖲️一行代码实现鼠标换肤

前言

在上网冲浪的时候,经常可以看到有一些网站,一进去 鼠标指针就变成一些动态小人,或者自定义的样式。

像下面这样

那么这是实现的呢?

很简单,通过csscursor属性实现的。

cursor属性的介绍

  • cursor CSS 属性设置光标的类型(如果有),在鼠标指针悬停在元素上时显示相应样式。

平常开发中,肯定有设置过

css 复制代码
cursor:pointer;

​ 让鼠标放到按钮上面的时候,指针变成这种样式。

​ 但是这个属性除了直接设置关键字来修改样式,还支持引入url的方式来修改鼠标样式。

用法

语法如下:

css 复制代码
// cursor: url(xxx), [关键字];
cursor: url('./img/指针.png'), pointer;

效果如下:

上面这句代码中cursor: url('./img/指针.png'), pointer;, url 后面一定要再设置一个默认值,要是图片加载失败,就会使用下一个样式

不设置的话,就会属性值无效

支持的类型

类型 是否支持
png ✔️
jpg ✔️
gif ✖️
wepb ✔️
svg ✔️
cur ✔️

gif类型:引进去之后,不会动,只会变成静态的图片

cur:是静态光标文件,平常电脑的鼠标光标就是这种文件类型

完整代码

html 复制代码
<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>网页鼠标换肤</title>
    <style>
      html,
      body {
        width: 100%;
        height: 100%;
      }
    </style>
  </head>
  <body>
    <div class="btns">
      <button onclick="mousePeeling('./img/指针.png')">png</button>
      <button onclick="mousePeeling('./img/指针.svg')">svg</button>
      <button onclick="mousePeeling('./img/鼠标.jpg')">jpg</button>
      <button onclick="mousePeeling('./img/波奇.webp')">webp</button>
      <button onclick="mousePeeling('./img/正常选择.cur')">cur</button>
    </div>
    <script>
      function mousePeeling(url) {
        const body = document.body
        body.style.cursor = `url(${url}), pointer`
      }
    </script>
  </body>
</html>

这里我写了一个demo,来演示效果

效果如下

结尾

这是效果的实现非常简单,主要就是cursor属性的应用。

有几个要注意的地方

  • 图片的尺寸最大不超过32*32,超过之后,图片加载不出来
  • url引入图片后,结尾一定要设置一个默认的光标样式。
相关推荐
蔗理苦33 分钟前
2025-09-05 CSS3——盒子模型
前端·css·css3
二川bro1 小时前
第25节:VR基础与WebXR API入门
前端·3d·vr·threejs
上单带刀不带妹1 小时前
Node.js 的模块化规范是什么?CommonJS 和 ES6 模块有什么区别?
前端·node.js·es6·模块化
缘如风2 小时前
easyui 获取自定义的属性
前端·javascript·easyui
诗书画唱2 小时前
【前端教程】JavaScript 实现图片鼠标悬停切换效果与==和=的区别
开发语言·前端·javascript
光影少年2 小时前
前端上传切片优化以及实现
前端·javascript·掘金·金石计划
喜葵2 小时前
前端安全防护深度实践:从XSS到供应链攻击的全面防御
前端·安全·xss
_r0bin_2 小时前
分片上传-
前端·javascript·状态模式
东北南西2 小时前
手写React状态hook
前端·javascript·react.js
王ASC2 小时前
禁止浏览器自动填充密码的方法
html