Я пытаюсь создать игру для набора текста (следуя руководству), но мой код работает не так, как у них. Когда позиция в CSS является абсолютной, курсор остается в правильном положении, когда я изменяю размер окна, но исчезает, когда я печатаю. Когда положение фиксировано, оно не выравнивается по тексту правильно, когда я изменяю размер окна, но перемещается так, как я хочу, когда я печатаю. я перепробовал множество комбинаций и решений, но не знаю, как это исправить.
CSS для курсора:
Код: Выделить всё
#cursor{
display: none;
width: 2px;
height: 1.6rem;
position: absolute;
top: 5%;
left: 1%;
background: #EE0000;
animation: blink 1s infinite;
}
И JS для перемещения курсора:
Код: Выделить всё
const nextLetter = document.querySelector(selectors = '.letter.current');
const cursor = document.getElementById(elementId = 'cursor');
if (nextLetter) {
cursor.style.top = nextLetter.getBoundingClientRect().top + 2 + 'px';
cursor.style.left = nextLetter.getBoundingClientRect().left + 'px';
}
})
Чтобы курсор оставался на одном уровне с текстовым элементом при изменении размера и работал с кодом перемещения курсора JavaScript
Подробнее здесь:
https://stackoverflow.com/questions/787 ... javascript
Мобильная версия