Javascript 在鼠标上方突出显示文本行
我目前正在一个网站上工作，该网站将提供一系列故事供人们阅读（基本上是一个博客）。我想让它们尽可能容易阅读，我想用光标“突出显示”文本行会很有用。有点像在看书的时候用手指跟随文本的线条 我偶然发现了它，但我似乎无法让它在我的页面上运行。这也是一个非常古老的答案，所以也许有一个改进的版本Javascript 在鼠标上方突出显示文本行,javascript,jquery,html,css,highlight,Javascript,Jquery,Html,Css,Highlight,我目前正在一个网站上工作，该网站将提供一系列故事供人们阅读（基本上是一个博客）。我想让它们尽可能容易阅读，我想用光标“突出显示”文本行会很有用。有点像在看书的时候用手指跟随文本的线条 我偶然发现了它，但我似乎无法让它在我的页面上运行。这也是一个非常古老的答案，所以也许有一个改进的版本 如果有人能帮我，我将永远感激 上一篇文章中的大多数答案和建议，因此您参考了，尝试通过为每行添加跨距或div来操纵DOM。但这实际上不是一个防水的方法，因为它不兼容跨浏览器，尤其是不兼容移动浏览器。您应该使用一个动态
如果有人能帮我，我将永远感激 上一篇文章中的大多数答案和建议，因此您参考了，尝试通过为每行添加跨距或div来操纵DOM。但这实际上不是一个防水的方法，因为它不兼容跨浏览器，尤其是不兼容移动浏览器。您应该使用一个动态jquery控制的div，该div跳转到行后面。div应该动态定位，并在mousemove上触发jquery函数，根据鼠标光标位置计算div在行高度上的跳跃编写了一些jquery代码，至少对我来说，这些代码看起来和工作起来都比您所指的文章中的代码好。希望它适合您的需要：） 还有一个现场演示 HTML
<div class="textWrapper">
<div class="highlight"></div>
<p>Your text goes here</p>
</div>
$（文档）.ready（函数（）
{
var-lineHeight=18；
$（'.textWrapper'）.hover（函数（）
{
$（'.highlight'，this.show（）；
$（this）.mousemove（函数（e）
{
var relativePos=e.pageY-this.offsetTop；
var textRow=（Math.ceil（relativePos/lineHeight）*lineHeight）-lineHeight；
如果（textRow=>0）
{
$（'.highlight'，this.css（'top'，textRow+'px'）；
}
});
}，函数（）
{
$（'.highlight'，this.hide（）；
});
});