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

Question

我目前正在一个网站上工作，该网站将以一堆故事供人们阅读（基本上是一个博客）。我想让它们尽可能易于阅读，并且我认为用光标“突出显示”文本行会很有用。有点像看书时用手指跟随文本行。

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

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

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

Answer 2

Most of the answers and suggestions in the older post on SO you reffered to try to manipulate the DOM by adding spans or divs for each line. But that's actually not a waterproof approach since it is not cross- browser compatble, especially not with mobile browsers. You should use a dynamically jquery controlled div that jumps behind the lines. The div should be dynamically be positioned with a jquery function triggered on mousemove calculating the div jumping on line-height depending on mouse cursor position