Question

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

我偶然发现this answer，但我似乎无法让它为我的网页工作。这也是一个非常古老的答案，所以也许有一个改进的版本？

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

Answer 1

写了一些jQuery代码，至少在我看来，它们的外观和工作都比你所指的帖子中的代码更好。希望它符合您的需求:)）

的现场演示

<强> 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();
    });
});

Answer 2

旧帖子中的大多数答案和建议都是你试图通过为每一行添加跨度或div来操纵DOM。但这实际上并不是一种防水方法，因为它不是跨浏览器兼容的，尤其不适用于移动浏览器。你应该使用一个动态jquery控制的div跳转到行后面。 div应该动态定位，并在mousemove上触发jquery函数，根据鼠标光标位置计算div跳跃行高

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

2 个答案: