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

Highlight lines of text on mouseover

本文关键字：显示 文本 悬停 鼠标      更新时间：2023-09-26

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

我

偶然发现了这个答案，但是我似乎无法让它适用于我的页面。这也是一个非常古老的答案，所以也许有一个改进的版本？

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

编写了一些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();
    });
});

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

相关文章：