На одном из видео нашел очень простую реализацию кастомного курсора с помощью css + js.
css:
.cursor {
position: fixed;
width: 15px;
height: 15px;
border-radius: 50%;
background: var(--black);
transition: 0.1s;
transform: translate(-50%, -50%);
pointer-events: none;
z-index: 200000;
mix-blend-mode: difference;
}
a:hover~.cursor {
transform: scale(6);
-moz-transform: scale(6);
}
js:
const cursor = document.querySelector('.cursor');
document.addEventListener('mousemove', (e) => {
cursor.style.left = e.clientX + 'px';
cursor.style.top = e.clientY + 'px';
})
Реализация должна состоять в следующем: мы имеем курсор (точку) черного цвета с шириной и высотой по 15 px. При наведении на ссылки, курсор должен изменять свой масштаб (transform: scale(6)). И т.к. ссылки на сайте черного цвета, при наведении курсора на ссылку, цвет ссылки должен стать белым с помощью свойства mix-blend-mode: difference. Но mix-blend-mode не срабатывает вообще (также пробовал с префиксами).
Если вместо тэга a поставить здесь a:hover ~ .cursor, например, тэг header, то transform:scale() срабатывает. Но mix-blend-mode: difference не меняет цвет ссылки на белый.
Как сделать так, чтобы transform: scale() срабатывал именно на ссылки при наведении? И как правильно реализовать изменение цвета ссылки, когда курсор будет наведен на нее (возможно есть варианты, подобные mix-blend-mode)?