Создание фокуса на элементе, который находится за другим элементом

Question

все. Я начинаю пытаться создать свой собственный сайт.

Для ввода поля я хочу, чтобы текст отображался за горизонтальными линиями. Для этого я создал элемент div контейнера со множеством sub divs, каждый из которых имел два пиксела с нижней границей одного пикселя, а затем помещал контейнер div перед полем ввода.

Проблема заключается в том, что при наведении курсора на поле ввода курсор меняется только на курсор стиля «текст» в маленькой области на самом левом краю поля ввода, не охватываемого горизонтальными линиями, созданными поддеревом элементы.

Что бы я хотел, и я боюсь, что мне может понадобиться Javascript, нужно, чтобы курсор, нависая над горизонтальными линиями контейнера div, превращался в «текстовый» курсор и, когда щелкнул, чтобы фокус активировался внутри поле ввода.

Надеюсь, мой вопрос не смущает. Заранее спасибо.

Answer 1

Добавить CSS для вашего div с горизонтальными линиями:

pointer-events: none; 

Это указывает на то, что ваш div элемент не должен стать объектом событий мыши, эффективно позволяя им «пройти через» него.

Для получения дополнительной информации см. MDN article on pointer-events.

Answer 2

Предполагая, что я понимаю ваш вопрос, вам нужно использовать JavaScript. С помощью JQuery вы можете сделать следующее:

$('.horizontalLines').click(function() { 
    $('.inputField').focus(); 
}); 

Это просто делает это так, что при нажатии один DIV будет выбрать поле для ввода текста.