Блог

Мне нужен текст, следующий за указателем, как эта скрипка, но текст исчезает.

Текст есть, если я изменю motion функцию следующим образом:

 function motion(e) {
      const follower = document.getElementById('follower');
      let posicX = e.pageX;
      let posicY = e.pageY   15;
      follower.style.left = posicX   'px';
      follower.style.top = posicY   'px';
};
 

Добавление 15 пикселей в положение Y работает. Дело в том, что мне нужно использовать его без добавления каких-либо пикселей.

Я попытался переключить follower компонент с <div> на <p> и <span> , но безуспешно. Есть какие-нибудь намеки на то, как это решить? Что я здесь упускаю?

Это не работает, потому что, как только #follower появляется элемент, ваш указатель теперь закончен #follower , и он срабатывает onleave(...) для холста, расположенного за пределами #follower.

Что вы можете сделать, так это добавить pointer-events: none; свойство CSS в стиль #follower.

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

 <div style="
        position: absolute;
        transform: translate(-50%, -50%);
        color: red;
        display: none;
        padding: 0;
        pointer-events:none; <--- !!! NOTICE property here
        margin: 0" id="follower">Hello!!!</div>
 

Теперь проблема с вашим подходом заключается в том, что каждый раз, когда вы обновляете положение элемента, он также запускает браузер для пересчета макета. Это не очень эффективно. Мне было бы лучше, если бы ты сделал что-то подобное

 follower.style.transform = `translate(${posicX}px, ${posicY}px)`;
 

Теперь лучшим подходом было бы отображать текст непосредственно на холсте и изменять его по мере необходимости.