突出显示鼠标悬停时的文本行

时间:2018-01-12 09:13:34

标签: javascript jquery css html5

我想为我的网站开发一个“读者帮助”。 当我在屏幕上阅读长篇文章时,特别是当它们用小字体书写时,我发现自己有时会丢失在页面中间,试图记住我刚读过的那行。为了避免这种不便,我通常会在阅读时选择文本,以便跟踪我的位置。

所有这一切都说我正在寻找一个脚本,它会自动检测光标位置并突出显示鼠标定位的整条线,以防止用户自己做。

我已经探索了一些选项,但我还没有找到一个可以解决我的问题。

我知道,例如,根据屏幕分辨率用标签包围它来改变文本本身的属性是不可行的,这些行可能会在不同的地方结束。

到目前为止,我想出的最好的想法是使用一个随光标一起移动的“浮动盒子”。但是,如果这个盒子挂在线上而不是在它们之间漂浮,我将不胜感激。

我怎么能做到这一点?

感谢。

1 个答案:

答案 0 :(得分:2)

https://www.sitepoint.com/community/t/is-it-possible-to-detect-where-text-wraps/6606

该页面的答案建议使用javascript将每个字符包裹在跨度中,并检查偏移值以检测换行。一旦检测到换行,就可以使用Javascript将单个行换行包裹到跨度中并突出显示它。

不确定这是不是足够的灵感,没有你身边的代码可以解决这个问题。