【自定义鼠标样式】怎么改变鼠标样式？

逆旅行天涯

已于 2024-11-21 17:28:22 修改

阅读量1k

点赞数 10

分类专栏： # 功能实现文章标签：计算机外设 css 前端

于 2024-11-01 10:32:59 首次发布

本文链接：https://blog.youkuaiyun.com/aaaa_aaab/article/details/143424601

版权

功能实现专栏收录该内容

24 篇文章

订阅专栏

在不同的情况下，我们鼠标的悬浮样式是不同的，比如默认的箭头，链接的小手等。那我们该如何自定义鼠标样式呢？

一、鼠标的样式

我们先来看下自带的鼠标的常用样式有哪些？

pointer
default
text
move
grab
not-allowed

初次之外还有很多样式，在此不过多展示。

二、如何改变鼠标样式

1.改变默认样式

body {cursor:  pointer; }

2.自定义样式

body {	cursor: url('./public/gu.png'), default;}

3.自定义鼠标跟随样式（拓展）

1.定义img标签，就以一张图片作为鼠标光标，建议为等宽高的图片：

<img class="mouse" src="./src/assets/images/dog.png" alt="">

2.初始化页面：

 *{
            margin: 0;
            padding: 0;
            box-sizing:border-box;
            cursor: none;           
        }

cursor: none; 清除掉页面默认鼠标样式；

3. 鼠标光标图片的css样式：

.mouse{
        width: 50px;
        height: 50px;
        border-radius: 50%;;
        position: fixed;
        left: -200px;
        z-index: 1000;
        pointer-events: none;
    }

z-index: 1000; 显示层级高点；
pointer-events: none; 取消它的鼠标事件，并指向它下面的元素。
position: fixed;
left: -200px; 固定定位，给个值让它在屏幕外；

4.js部分，实现效果：

  var mouse = document.querySelector('.mouse');
        window.addEventListener('mousemove',function(event){    
            mouse.style.left = event.clientX - mouse.offsetWidth/2 + 'px' ;
            mouse.style.top = event.clientY -mouse.offsetHeight/2 + 'px';       
        })

核心就是获取鼠标在网页中的位置值，并赋值给鼠标光标，再通过绝对定位设置位置即可。
mouse.offsetWidth/2 别忘了减去自身宽（高）的一半。