我禁用鼠标的页面光标没有整个身体的文件，并添加了我的自定义svg和使用翻译x和y与鼠标移动事件设置自定义鼠标的位置。但是在一些地方，比如按钮，文本，光标显示为指针和文本默认值，有没有办法检测光标是否已经更改为指针或任何其他，并将其更改为我自己的自定义指针设计，如svg？
我尝试了JavaScript中的mouseover事件，但是当我用指针悬停在一个按钮上时，它可以工作，但不知道如何禁用它并在那里添加我自己的自定义svg？

document.addEventListener('mouseover',function(e){
  var cursor = getComputedStyle(e.target).cursor;
  console.log(cursor);
  if(cursor == 'pointer') {
    e.target.classList.toggle('no-cursor')
  }
});

.no-cursor {cursor: none !important}

请附上一个小例子，这将是一个很大的帮助：）

document.addEventListener("mousemove", e => {
  document.querySelector('.mover').style.transform = `translate(${event.pageX}px, ${event.pageY}px)`
  
});

.mover {
  width: 50px;
  height: 50px;
  position: fixed;
  left: -8px;
  top: -6px;
}

html {
  cursor: none;
}

body {
    min-height: 100vh;
    font-family: Roboto, Arial;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #F5F9FF;
  
}

.btn {
    --background: #5628EE;
    --shadow: rgba(84, 40, 238, .16);
    --y: 0;
    display: table;
    text-align: center;
    padding: 12px 24px;
    border-radius: 4px;
    color: #fff;
    background: var(--background);
    text-decoration: none;
    font-weight: 500;
    font-size: 16px;
    line-height: 23px;
    backface-visibility: hidden;
    box-shadow: 0 4px 12px var(--shadow);
    transform: translateY(var(--y));
    transition: box-shadow .3s ease, transform .3s ease;
    &:hover {
        --y: -2px;
        box-shadow: 0 8px 16px var(--shadow);
    }
    &:active {
        --y: 1px;
        box-shadow: 0 4px 8px var(--shadow);
    }
}

<div class="mover">
  <svg width="24" height="24" viewBox="0 0 24 24">
  <path d="M12,11.5A2.5,2.5 0 0,1 9.5,9A2.5,2.5 0 0,1 12,6.5A2.5,2.5 0 0,1 14.5,9A2.5,2.5 0 0,1 12,11.5M12,2A7,7 0 0,0 5,9C5,14.25 12,22 12,22C12,22 19,14.25 19,9A7,7 0 0,0 12 ,2Z"></path>
</svg>
</div>

<a href="" class="btn">Call to action</a>

请不要建议手动的方式来做这件事，我想做这一切自动