Jak dodać własny kursor na stronie w CSS?
Chcę zastąpić domyślny kursor myszy własną grafiką – logo marki albo niestandardową ikonką. Jak to zrobić przez CSS i jakie formaty pliku są obsługiwane?
1 Odpowiedź
Hej!
Własny kursor to jeden z tych detali które mogą wzmocnić wizerunek marki i sprawić że strona zapada w pamięć.
Zmiana kursora przez CSS
body {
cursor: url('kursor.png'), auto;
}
Zawsze podawaj fallback (auto) – jeśli przeglądarka nie obsługuje pliku, używa domyślnego kursora.
Obsługiwane formaty
.cur – natywny format kursora, obsługiwany wszędzie. .png – obsługiwany przez Chrome i Firefox. Maksymalny rozmiar 128x128px. .svg – obsługiwany przez Chrome i Firefox, nie przez Safari.
Zalecany rozmiar: 32x32px albo 64x64px.
Różne kursory dla różnych elementów
a:hover, button:hover {
cursor: url('kursor-klik.png'), pointer;
}
img {
cursor: url('kursor-zoom.png'), zoom-in;
}
Własny kursor przez JavaScript
Jeśli chcesz animowany kursor który podąża za myszą:
const kursor = document.createElement('div');
kursor.id = 'custom-cursor';
document.body.appendChild(kursor);
document.addEventListener('mousemove', e => {
kursor.style.left = e.clientX + 'px';
kursor.style.top = e.clientY + 'px';
});
Własny kursor działa tylko na desktop – na mobile nie ma myszki. 😊
