学校网站建设规划书,搜索关键词怎么让排名靠前,广州网站搭建多少钱,webqq网页版登录入口CSS自定义鼠标样式 
属性值 
属性描述url需使用的自定义光标的 URLdefault默认光标#xff08;通常是一个箭头#xff09;auto默认。浏览器设置的光标crosshair光标呈现为十字线pointer光标呈现为指示链接的指针#xff08;一只手#xff09;move此光标指示某对象可被移动e…CSS自定义鼠标样式 
属性值 
属性描述url需使用的自定义光标的 URLdefault默认光标通常是一个箭头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) 0 32, auto;
}使用cursor: none; 
全局设置cursor: none;使屏幕上看不见鼠标的默认样式再手写一个div并给它赋予自定义样式此时是用htmlcss来给其设置样式不再有局限性监听 body 上的 mousemove并实时设置div的位置给div设置pointer-events: none;阻止默认的鼠标事件让事件透传否则hover及click等事件不会生效 
当然这里还有一点缺陷我们应该监听到鼠标移出body把div销毁这里就不再赘述。 
完整代码如下 
div idcontainer/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);});
});查看完整效果点击这里 ➡链接