每次加载新页时，都会将自定义游标重置到页的左上方。

Question

我有一个自定义光标在我的网站，是完美的工作，除了一件事。当单击到新页时，当页面加载游标时，它会将自己重置到页面的左上角，而不管鼠标在页面上的位置如何，然后一旦移动鼠标，光标就会移回鼠标所在的位置。我试着从CSS中删除"top“& "left”，但问题仍然存在。我看不出是什么导致了这种情况，我只需要光标停留在鼠标在页面上的位置，而不是每次你导航到一个新的页面时重置。

​

jQuery(document).ready(function($) {
let cursor = document.querySelector('#custom-cursor');

    if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|Windows Phone/i.test(navigator.userAgent)) {
    $('#custom-cursor').remove();
}
else { cursor.style.display = 'block';}

document.addEventListener('mousemove', evt => {
    
  let { clientX: x, clientY: y } = evt;
  let scale = 1;
  
  if (evt.target.matches('a,span,[onclick],img,video,i')) {
    cursor.classList.add('active');
    scale = 0.5;
  } else {
    cursor.classList.remove('active');
  }
  
  cursor.style.transform = `translate(${x}px, ${y}px) scale(${scale})`;
  
});
});

* {
  cursor: none;
}

#custom-cursor {
  display: none;
  position: fixed;
  width: 20px; height: 20px;
  top: -10px;
  left: -10px;
  border: 2px solid black;
  border-radius: 50%;
  opacity: 1;
  background-color: #fb4d98;
  pointer-events: none;
  z-index: 99999999;
  transition:
    transform ease-out 0.15s,
    border 0.5s,
    opacity 0.5s,
    background-color 0.5s;
}
#custom-cursor.active {
  opacity: 0.5;
  background-color: #000;
  border: 2px solid #fb4d98;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="custom-cursor"></div>

​

Answer 1

使用the other answer中所示的普通CSS游标，并在第一个鼠标事件中将其替换为您喜欢的游标：

​

jQuery(document).ready(function($) {
  let cursor = document.querySelector('#custom-cursor');

  document.addEventListener('mousemove', evt => {
    document.body.classList.add('custom-cursor-moved')

    if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|Windows Phone/i.test(navigator.userAgent)) {
      $('#custom-cursor').remove();
    } else {
      cursor.style.display = 'block';
    }


    let {
      clientX: x,
      clientY: y
    } = evt;
    let scale = 1;

    if (evt.target.matches('a,span,[onclick],img,video,i')) {
      cursor.classList.add('active');
      scale = 0.5;
    } else {
      cursor.classList.remove('active');
    }

    cursor.style.transform = `translate(${x}px, ${y}px) scale(${scale})`;

  });
});

body {
  height: 100vh;
}

html,
body {
  margin: 0;
  padding: 0;
}

* {
  cursor: url(https://i.stack.imgur.com/7pmmV.png) 0 0, auto;
}

.custom-cursor-moved,
.custom-cursor-moved * {
  cursor: none !important;
}

#custom-cursor {
  display: none;
  position: fixed;
  width: 20px;
  height: 20px;
  top: -10px;
  left: -10px;
  border: 2px solid black;
  border-radius: 50%;
  opacity: 1;
  background-color: #fb4d98;
  pointer-events: none;
  z-index: 99999999;
  transition: transform ease-out 0.15s, border 0.5s, opacity 0.5s, background-color 0.5s;
}

#custom-cursor.active {
  opacity: 0.5;
  background-color: #000;
  border: 2px solid #fb4d98;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="custom-cursor"></div>

Try me.<br> Try me.

​

它需要一些修改(更好的光标图像，修复它热点等)。但很管用。

在做这样的事情时要非常非常小心。请不要破坏任何可访问性工具，请不要假设Android/某些特定的用户代理有触摸屏等。使用正确的API。

Answer 2

改用CSS cursor属性：

​

html {
  cursor: url(https://cdn.sstatic.net/Sites/stackoverflow/Img/favicon.ico?v=ec617d715196) 0 0, auto;
  height: 100%;
}

Try me.

​