Der benutzerdefinierte Cursor kehrt auf Standard zurück, wenn er über ein Bild schwebt ⇐ CSS

[Guest]

Ich arbeite an einer Website, auf der ich benutzerdefinierte Cursoren implementiere. Diese Cursoren ändern sich je nach Hintergrund. Der Cursor kehrt jedoch auf Standard zurück, wenn sie in der Nähe/Einstellung des Erdbildes auftreten. Hier ist mein HTML -Code: < /p>

Winter
Summer
Spring
Autumn






< /code>
CSS: < /p>
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;
}

< /code>
JavaScript (zum Drehen der Erde und der Änderung des Hintergrunds nach dem Scrollen): < /p>
// 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');

}
< /code>
Um dieses Problem zu beheben, habe ich versucht, die Positionierung von Elementen in der HTML -Datei neu zu ordnen, indem ich das Erdbild nach unten verschoben habe, aber nichts scheint zu funktionieren. < /p>
Ich habe auch versucht, den Cursor für #earth in CSS -Datei auf None zu ändern, aber das hat den Cursor nur insgesamt verschwinden: (
Die Antworten werden geschätzt, danke!