CSS自定义鼠标样式-觅稀奇MeXiQi.COM

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	此光标指示可用的帮助（通常是一个问号或一个气球）

效果
效果查看，点击这里➡：链接
自定义样式

使用cursor:url();

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

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

使用cursor:none;

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

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

完整代码如下：

<divid="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;}

constbody=document.querySelector("body");constelement=document.getElementById("container");consthalfAlementWidth=element.offsetWidth/2;functionsetPosition(x,y){element.style.transform=`translate(${x-halfAlementWidth}px,${y-halfAlementWidth}px)`;}//监听鼠标移动，元素位置跟随鼠标变化body.addEventListener('mousemove',(e)=>{window.requestAnimationFrame(function(){setPosition(e.clientX,e.clientY);});});

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