Programmiererforum

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!