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

Question

我目前正在开发一个网站，其中将包含一系列故事供人们阅读（基本上是博客）。我希望让它们尽可能易于阅读，并且我认为使用光标“突出显示”文本行会很有用。就像在阅读书籍时用手指跟随文本行一样。

我偶然发现了这个答案，但我似乎无法使其在我的页面上正常工作。而且这是一个相当古老的答案，也许有改进版本？

如果有人能帮助我，我将永远感激！

- Swen

---

那个jsbin上的例子看起来非常高效。你能发一下你的代码吗，这样我们就能看出为什么它不工作了？ - PJH

更新：已添加。它只应用于站点左侧的文章（而不是滑块）。 - Swen

Answer 1

我写了一些jQuery代码，至少在我看来，比您提到的文章中的代码看起来更好，并且运行得更好。希望它适合您的需求：）

此外，在http://jsfiddle.net/gFTrS/2/上还有一个实时演示。

HTML

<div class="textWrapper">
    <div class="highlight"></div>
    <p>Your text goes here</p>
</div>

CSS

.textWrapper
{
    position: relative;
    width: 600px;
    padding: 0px 10px;
    margin: 0 auto;
    cursor: default;
}

.textWrapper p
{
    font: normal 12px Arial;
    color: #000000;
    line-height: 18px;
    padding: 0;
    margin: 0;
}

.highlight
{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 18px;
    background: yellow;
    z-index: -1;
    display: none;
}

jQuery

$(document).ready(function()
{
    var lineHeight = 18;

    $('.textWrapper').hover(function()
    {
        $('.highlight', this).show();

        $(this).mousemove(function(e)
        {
            var relativePos = e.pageY - this.offsetTop;
            var textRow = (Math.ceil(relativePos / lineHeight) * lineHeight) - lineHeight;
            if (textRow => 0)
            {
                $('.highlight', this).css('top', textRow + 'px');
            }
        });
    }, function()
    {
        $('.highlight', this).hide();
    });
});

- Tom

---

我会尝试这个并回报是否有效。 - Swen

就是这样！这就是我想说的（未经测试）。快速编写脚本！ - Martin van Dam

好的，我刚试着添加了这个，但似乎不起作用（很可能是我做错了什么）。您可以在此处查看：http://www.s-hosting.nl/creepypastaindex/（左下角的帖子）。 - Swen

@Fred-ii- 啊，没有看到那个 ^^ - Tom

@Fred-ii- 在记事本中不显示，但在右键单击时的“搜索Google...”中显示。 - Tom

Answer 2

你所提到的旧帖子中大多数答案和建议都试图通过为每行添加span或div来操作DOM。但这实际上不是一种可靠的方法，因为它在跨浏览器兼容性方面存在问题，特别是在移动浏览器上。你应该使用一个动态的、由jQuery控制的div，它会跳到行后面。这个div应该是动态定位的，可以通过一个在mousemove事件上触发的jQuery函数来计算div跳跃的行高，具体取决于鼠标指针的位置。

- Martin van Dam