学校网站建设规划书,搜索关键词怎么让排名靠前,广州网站搭建多少钱,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);});
});查看完整效果点击这里 ➡链接
