我在一個網站上工作，在那里我實現自定義光標。這些光標根據背景而變化，但是，當光標靠近地球圖像或位于地球圖像頂部時，光標會返回默認狀態。以下是我的html代碼:

<div class="main-wrapper">
            <div class="season winter" data-background="#2b1055">Winter</div>
            <div class="season summer" data-background="#5988e2">Summer</div>
            <div class="season spring" data-background="#7cdea1">Spring</div>
            <div class="season autumn" data-background="#cf8a8a">Autumn</div>
        </div>

        <div class="wrapper">
            <div>
                <img id="earth" src="img/earth.png" alt="scroll">
            </div>
        </div>

CSS:

body {
  transition: background 1s ease-in-out;
}

.season {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  color: #fff;
  font-family: sans-serif;
  font-size: 72px;
  font-weight: 600;
  text-transform: uppercase;
  &[data-background="yellow"] { color: #333; };
}

.winter {
  cursor: url('img/winter-cursor.png'), auto;
}

.summer {
  cursor: url('img/summer-cursor.png'), auto;
}

.spring {
  cursor: url('img/spring-cursor.png'), auto;
}

.autumn {
  cursor: url('img/autumn-cursor.png'), auto;
}

.wrapper {
  top: 120%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: fixed;
}

#earth {
  width: 800px;
  height: 800px;
}

JavaScript(用于滾動時地球的旋轉和背景的改變):

// Rotating earth 
window.onscroll = function() {
  scrollRotate();
};

function scrollRotate() {
  let image = document.getElementById("earth");
  image.style.transform = "rotate(" + window.pageYOffset / 24 + "deg)";
}

// Background change 
window.sections = [...document.querySelectorAll('.season')];
window.lastScrollTop = window.pageYOffset;

document.body.style.background = window.sections[0].getAttribute('data-background');

window.addEventListener('scroll', onScroll);

function onScroll() {
  const scrollTop = window.pageYOffset;
  const section = window.sections
    .map(section => {
      const el = section;
      const rect = el.getBoundingClientRect();
      return {el, rect};
    })
    .find(section => section.rect.bottom >= (window.innerHeight * 0.5));

  document.body.style.transition = 'background 1s cubic-bezier(0.3, 0.3, 0.3, 0.3)';
  document.body.style.background = section.el.getAttribute('data-background');

}

為了解決這個問題，我試著通過向下移動地球圖片來重新安排html文件中元素的位置，但是沒有任何效果。

我還試著在css文件中將#earth的光標改為none，但這只是讓光標完全消失了:(

感謝任何回復！

希望下面的回答適合你。

window.onscroll = function() {
  
  var getCurrentClassName =//add some code for getting class name based on scroll;
  scrollRotate(getCurrentClassName);//"winter"
  
};

function scrollRotate(seasonName) {
  let image = document.getElementById("earth");
  image.classList.replace(seasonName);
  image.style.transform = "rotate(" + window.pageYOffset / 24 + "deg)";
}