CSS自定义鼠标样式

CSS自定义鼠标样式

• 属性值

属性	描述
url	需使用的自定义光标的 URL
default	默认光标（通常是一个箭头）
auto	默认。浏览器设置的光标
crosshair	光标呈现为十字线
pointer	光标呈现为指示链接的指针（一只手）
move	此光标指示某对象可被移动
e-resize	此光标指示矩形框的边缘可被向右（东）移动
ne-resize	此光标指示矩形框的边缘可被向上及向右移动（北/东）
nw-resize	此光标指示矩形框的边缘可被向上及向左移动（北/西）
n-resize	此光标指示矩形框的边缘可被向上（北）移动
se-resize	此光标指示矩形框的边缘可被向下及向右移动（南/东）
sw-resize	此光标指示矩形框的边缘可被向下及向左移动（南/西）
s-resize	此光标指示矩形框的边缘可被向下移动（南）
w-resize	此光标指示矩形框的边缘可被向左移动（西）
text	此光标指示文本
wait	此光标指示程序正忙（通常是一只表或沙漏）
help	此光标指示可用的帮助（通常是一个问号或一个气球）

• 效果
  效果查看，点击这里 ➡：链接

• 自定义样式

1. 使用cursor: url();

css代码如下，就能得到一个切换了图片的鼠标样式：

html, body {
	width: 100%;
    height: 100%;
}
body {
	cursor: url("./draw.png") 0 32, auto;
}

2. 使用cursor: none;

• 全局设置cursor: none;，使屏幕上看不见鼠标的默认样式
• 再手写一个div并给它赋予自定义样式，此时是用html+css来给其设置样式，不再有局限性
• 监听 body 上的 mousemove，并实时设置div的位置
• 给div设置pointer-events: none;阻止默认的鼠标事件，让事件透传，否则hover及click等事件不会生效

当然，这里还有一点缺陷，我们应该监听到鼠标移出body把div销毁，这里就不再赘述。

完整代码如下：

<div id="container"></div>

* { margin: 0; padding: 0; }

html, body {
    width: 100%;
    height: 100%;
}

body {
    cursor: none;
    position: relative;
}

#container {
    position: absolute;
    top: 0;
    left: 0;
    width: 12px;
    height: 12px;
    background-color: #000;
    border-radius: 50%;
    z-index: 1;
    // 阻止默认的鼠标事件，让事件透传
    pointer-events: none;
}

const body = document.querySelector("body");
const element = document.getElementById("container");
const halfAlementWidth = element.offsetWidth / 2;

function setPosition(x, y) { 
    element.style.transform  = `translate(${x - halfAlementWidth}px, ${y - halfAlementWidth}px)`;       
}

// 监听鼠标移动，元素位置跟随鼠标变化
body.addEventListener('mousemove', (e) => {
  window.requestAnimationFrame(function(){
    setPosition(e.clientX, e.clientY);
  });
});

查看完整效果，点击这里 ➡：链接