我正在尝试构建一个带有用户可以输入的输入框的Web应用程序。当识别出某些字符串时，我希望用户能够将鼠标悬停在它们上面以引起某些操作。
但是，因为我正在使用
<input type="text">
收集用户的输入（由于缺乏浏览器兼容性，而不是一个可信的div），我不能将子div或spans放入文本框本身。相反，我被迫在顶部覆盖可以触发：hover或.hover（）事件的div。
问题来了 - 如果我希望用户能够点击那些重叠的div下方的文本框，我必须将它们设置为
"pointer-events:none;"
这完全打破了悬停事件触发功能。
我已经检查了几个类似的问题，但没有一个匹配我的问题，因为没有人专注于下面的输入元素...如果这是一个图像或下面的一些其他元素，使用javascript / jQuery相对容易将点击事件手动传递到下部元素（点击位置无关紧要）。
jsFiddle链接：http://jsfiddle.net/eBnmw/
（适用于chrome和safari，不确定IE）
有什么建议吗？