中心自定义光标

Question

我创建了一个跟随鼠标的自定义光标。当悬停在链接上时，我想让自定义圆圈变大。我遇到的问题是，当圆圈变成更大的圆圈时，它不再以光标为中心。我不太确定如何在自定义圆圈变大时使其居中。下面的代码是用于让自定义圆圈跟随光标的 JS。提前致谢！

let clientX = -100;
let clientY = -100;
const innerCursor = document.querySelector(".cursor--small");

const initCursor = () => {

  document.addEventListener("mousemove", e => {
    clientX = e.clientX;
    clientY = e.clientY;
  });
  

  const render = () => {
    innerCursor.style.transform = `translate(${clientX}px, ${clientY}px)`;

    requestAnimationFrame(render);
  };

  requestAnimationFrame(render);
};

initCursor();

Answer 1

无法以编程方式移动用户的光标。您可以将其锁定到某个位置，但这会造成糟糕的用户体验，并且可能在其他方面存在问题（跨浏览器问题）。

我建议使用样式为悬停创建更大的 'hit' 区域。

a.cursor-thing{
display:inline-block;
padding:20px;
margin:-20px;
}

a.cursor-thing:hover{
background:#f00;
}

Here is a sentence where you can <a href='#' class='cursor-thing'>hover over me</a> or even  <a href='#' class='cursor-thing'>hover over me</a>.

中心自定义光标

Center Custom Cursor

javascript

cursor