Пользовательский курсор возвращается к по умолчанию при парясь над изображением ⇐ Html

[Anonymous]

Я работаю на веб -сайте, где я внедряю пользовательские курсоры. Эти курсоры меняются в соответствии с фоном, однако курсор возвращается к по умолчанию, когда ближе/на вершине изображения Земли. Вот мой код HTML: < /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 (для вращения Земли и изменения фона при прокрутке): < /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>
Чтобы решить эту проблему, я попытался перестроить позиционирование элементов в файле HTML, переместив изображение Земли, но, кажется, ничего не работает. < /p>
Я также попытался изменить курсор на никто для #Earth в файле CSS, но это просто заставило курсор вообще исчезнуть: (
Любые ответы ценится, спасибо!

Подробнее здесь: https://stackoverflow.com/questions/763 ... r-an-image