Der benutzerdefinierte Cursor kehrt auf Standard zurück, wenn er über ein Bild schwebtCSS

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

Post by 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



Image


< /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!

Quick Reply

Change Text Case: 
   
  • Similar Topics
    Replies
    Views
    Last post