HTML中的自定义游标

我正在为网站创建自定义光标。当鼠标移动时，我有两个div居中于光标，但是当我将鼠标悬停在锚标记上时，背景光标的位置关闭了。我试过使用pageX和pageY将其放在for循环的中心，但是似乎不起作用。帮助吗？

这是我的HTML：

CSS：

.cursor{
height:10px;
width:10px;
border-radius:50%;
position:absolute;
background: #fff;
z-index: 100;
}
.cursor-bg{
height:30px;
:30px;
border-radius:50%;
position:absolute;
background: $lightCursor-bg;
transition-duration: 400ms;
transition-timing-function: ease-out;
}
.expand{
width: 100px;
height: 100px;
position: absolute;
border:solid 1px #fff;
background: rgba(255,255,0);
}


JS：

(function(){
var cursor = document.querySelector('.cursor');
var cursorBg = document.querySelector('.cursor-bg');
var navLinks = document.querySelectorAll('a');
document.addEventListener('mousemove',e => {
cursor.style.left = (e.pageX - 5) + 'px';
cursor.style.top = (e.pageY - 5) + 'px';
cursorBg.style.left = (e.pageX - 15) + 'px';
cursorBg.style.top = (e.pageY -15) + 'px';
});
for (var i = 0; i var singleLink = navLinks[i];
singleLink.addEventListener('mouseover',e => {
cursorBg.classList.add("expand");
cursorBg.style.left = (e.pageX - 50) + 'px';
cursorBg.style.left = (e.pageY - 50) + 'px';
})
singleLink.addEventListener('mouseout',e => {
cursorBg.classList.remove("expand");
})
}
})();


您可以为此使用css cursor属性：

cursor: url(https://example.com/your-image.png),auto

演示：

如果要将光标应用于整个页面，只需将CSS添加到正文中。

CSS cursor property