Как изменить цвет части текста при наведении?

Question

[mozhno]

Столкнулся с проблемой, на сайте будет не стандартный курсор, а точка. Его я сделал уже с помощью отслеживания координат курсора и заменой стандартного на <div class="cursor"></div> . Но при наведении на ссылки он должен становится красным и в области курсора, текст должен становится белым. На скриншоте пример как должно быть.
Можно ли как-то это сделать, может есть какие-то свойства css или это только с помощью скриптов делать?

Comments

[Роман Жарков]

Скорее всего тебе потребуется использовать свойство filter и накладывать его на твой div-курсор

[imko]

Вот тут подгляди https://css-tricks.com/reverse-text-color-mix-blen...

[mozhno]

imko, Спасибо, кажется то что нужно

[Вадим]

mozhno, Насколько я понимаю, то, как написано в статье, которую скинул imko, так, конкретно у Вас, не получится.
Потому что нет такого режима наложения, который оперируя чёрным и красным дал бы белый.
Это в принципе "противоестественно".

Но может кто-то кто разбирается в теории цвета больше меня поправит.

[Вадим]

www.bolshoyvopros.ru/questions/1879542-kakie-cveta...

[Вадим]

mozhno, если поменять цвет текста из демки статьи на чёрный. то получается ядовито бирюзовый. Белый - не выйдет.

[Саман]

Можно просто наложить негативный эффект

Answer 1

[trijin]

Сделал немного коряво на скорою руку, но как один из вариантов - 2 одинаковых слоя друг над другом.
Второй показывается через обрезающий слой.
https://codepen.io/trijin/pen/KKrXzjP

Comments

[trijin]

https://stackoverflow.com/questions/49793312/inver... а вот тут еще несколько способов.

[mozhno]

К сожалению то что у вас - не подходит, там именно что слои друг над другом.
А вот то что в статье на overflow - как раз то что нужно
Но проект я уже сдал, но может пригодится ещё где, так что спасибо в любом случае) Отмечу ваш ответ как решение