Как сделать ховер на каждую букву по отдельности в слове?

Первое что в голову пришло: оно конечно можно высчитать конкретную букву (индекс) под курсором (в бекграунде наполнять строку пока ширина не превысит позицию курсора по (скрыв от пользователя) и зная индекс - можно строку разбить на 3 части, тем самым обернув нужную букву в тег. Но тут стоит учитывать кейсы, обрезается ли текст при переполнении, переносится ли на следующую строку и т.д. Будет мягко говоря оверинжиниринг и что-то мне подсказывает будет заметно менее производительным и более костыльным, чем спан под каждую букву. Либо на канвасе рисовать текст и туда вынести всю математику, но если потребуются сложные анимации то будет больно. Задача конечно дебильная

0

08.08.2022

Zahar Avsievich

va1
Первое что в голову пришло: оно конечно можно высч...

на самом деле нормальная задача) просто каждую букву в спан оборачивать лучше скриптом, а не руками

0

08.08.2022

va1

Zahar Avsievich
на самом деле нормальная задача) просто каждую бук...

я просто представил как контент размером в пол страницы обернуть каждую букву в спан - и понял, что задача мне очень не нравится)))

0

08.08.2022

S.A.SH Автор вопроса

va1
Первое что в голову пришло: оно конечно можно высч...

Я не читал твое сообщение, но вот что посоветовали и оно работает, {word.split('').map((letter) => <span className="letter-hover">{letter}</span>)} .letter-hover:hover {background-color: red;}

0

08.08.2022

va1

S.A.SH
Я не читал твое сообщение, но вот что посоветовали...

Ты же против оборачивания)

0

08.08.2022

S.A.SH Автор вопроса

va1
Ты же против оборачивания)

Мне тут написали обернуть каждую букву в span, тут я созроняю целое предложение в usestate отуда делаю split

0

08.08.2022