创建焦点在不同元素后面的元素

Question

所有。我是初学者，正在尝试创建自己的网站。

对于输入字段，我希望文本显示在水平线后面。为了实现这一点，我创建了一个容器div元素，其中包含许多子div，每个子像素高两个像素，底部边框为一个像素，然后将容器div放在输入字段的前面。

问题是当鼠标悬停在输入字段上时，光标只会变为输入字段最左边的小区域中的“文本”样式光标，而不是由子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就可以选择文本输入框。