Как изменить цвет части текста при наведении?
Столкнулся с проблемой, на сайте будет не стандартный курсор, а точка. Его я сделал уже с помощью отслеживания координат курсора и заменой стандартного на <div class="cursor"></div> . Но при наведении на ссылки он должен становится красным и в области курсора, текст должен становится белым. На скриншоте пример как должно быть.
Можно ли как-то это сделать, может есть какие-то свойства css или это только с помощью скриптов делать?
Дополнительно:
Скорее всего тебе потребуется использовать свойство filter и накладывать его на твой div-курсор
Потому что нет такого режима наложения, который оперируя чёрным и красным дал бы белый.
Это в принципе "противоестественно".
Но может кто-то кто разбирается в теории цвета больше меня поправит.
Сделал немного коряво на скорою руку, но как один из вариантов - 2 одинаковых слоя друг над другом.
Второй показывается через обрезающий слой.
https://codepen.io/trijin/pen/KKrXzjP
- https://stackoverflow.com/questions/49793312/inver... а вот тут еще несколько способов.
- К сожалению то что у вас - не подходит, там именно что слои друг над другом.
А вот то что в статье на overflow - как раз то что нужно
Но проект я уже сдал, но может пригодится ещё где, так что спасибо в любом случае) Отмечу ваш ответ как решение
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для изменения цвета части текста при наведении мы можем использовать CSS псевдо-класс :hover. Этот псевдо-класс позволяет применить стили к элементу при наведении курсора на него.
Для примера, давайте представим, что у нас есть абзац с текстом, и нам нужно изменить цвет части этого текста при наведении. Для этого мы можем использовать следующий CSS код:
p:hover { color: red; }
В этом примере мы указываем, что при наведении курсора на абзац, текст внутри этого абзаца будет окрашен в красный цвет.
Если вы хотите изменить цвет не всего текста внутри элемента, а только части текста, вы можете воспользоваться спан элементом и применить стили к нему при наведении. Например:
<p>Это <span class="highlight">важный</span> текст</p>
.highlight:hover { color: blue; }
В этом примере, при наведении курсора на слово "важный", оно будет окрашено в синий цвет.
Таким образом, используя CSS псевдо-класс :hover и комбинируя его с элементами HTML, вы можете легко изменить цвет части текста при наведении на неё.