关注不同元素背后的元素答案

【问题标题】：Creating focus on element that's behind a different element关注不同元素背后的元素
【发布时间】：2017-01-25 22:20:29
【问题描述】：

所有。我是一个尝试创建自己的网站的初学者。

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

问题是当鼠标悬停在输入框上时，光标只在输入框最左边缘的小区域变成“文本”样式的光标，没有被子div元素创建的水平线覆盖.

我想要发生的事情，我担心我可能需要 Javascript，是让光标在将鼠标悬停在容器 div 的水平线上时，变成“文本”光标，然后单击以激活焦点输入字段。

我希望我的问题不会令人困惑。先感谢您。

【问题讨论】：

【解决方案1】：

使用水平线将此 CSS 添加到您的 div：

pointer-events: none;

这表明您的div 元素不应成为鼠标事件的目标，从而有效地让它们“通过”它。

有关详细信息，请参阅MDN article on pointer-events。

【讨论】：

【解决方案2】：

假设我理解您的问题，您确实需要使用 JavaScript。使用 jQuery，您可以执行以下操作：

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

这只是为了使单击一个 div 将选择文本输入框。

【讨论】：