如何将自定义光标移动到文本上

Question

我制作了一个自定义光标，但它无法在文本（p、h1、按钮、跨度）上正常工作。这是代码

html:

<!-- custom cursor -->
<div class="cursor"></div>

js:

    const cursor = document.querySelector(".cursor");

    document.addEventListener("mouseover", (e) => {
        cursor.style.left = e.pageX + "px";
        cursor.style.top = e.pageY  + "px";
        console.log(e.pageX, e.pageY); // i checked pageX and pageY values also not change when cursor moves over a text or button

     })

css:

.cursor{
    position: fixed;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background-color: #ffffff38;
    transition-duration: 0.16s;
    -o-transition-duration: 0.16s;
    -moz-transition-duration: 0.16s;
    -webkit-transition-duration: 0.16s;
    transition-timing-function:ease;
    -o-transition-timing-function:ease;
    -moz-transition-timing-function:ease;
    -webkit-transition-timing-function:ease;
    transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    pointer-events: none;
    mix-blend-mode: difference;
    /* display: none; */
    z-index: 10000;
}

它在链接上运行良好。你能告诉我如何让光标平滑移动（在所有文本和按钮上）

Answer 1

mouseover 事件在您将鼠标移到某个元素上时触发 - 但当您将鼠标移到该元素内时它不会持续触发。

您尝试过 mousemove 吗？

Answer 2

我认为下面的代码会对您有所帮助。您的代码中有一些错误，例如光标的背景颜色background-color: #ffffff38;，这是白色的，在白页中看不到。而且我还隐藏了原始光标。在JavaScript代码中你使用了mouseover，每次鼠标进入特定区域都会触发，你应该使用mousemove，每次移动鼠标都会触发。

const cursor = document.querySelector(".cursor");

document.addEventListener("mousemove", (e) => {
  cursor.style.left = e.pageX + "px";
  cursor.style.top = e.pageY + "px";
  console.log(e.pageX, e.pageY);
  // i checked pageX and pageY values also not change when cursor moves over a text or button

})

html{
  cursor: none;
}
.cursor {
  position: absolute;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  border: 1px solid black;
  z-index: 10000;
}

<!-- custom cursor -->
<div class="cursor"></div>

如何将自定义光标移动到文本上

How to move custom cursor over a text

html

javascript

css

jquery

custom-cursor