jquery - 悬停时逐行突出显示段落

Question

这个问题已经有答案了:

Highlight single line on mouse over (4 个回答)

已关闭 7 年前。

是否可以仅突出显示鼠标指针悬停的行？假设我有这一段:

<p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
    Nam in nisi eleifend, efficitur ligula vel, scelerisque risus. 
    Interdum et malesuada fames ac ante ipsum primis in faucibus. 
    Nam semper diam sodales eros dictum euismod. Duis ut hendrerit leo. Sed iaculis sem ac est porttitor facilisis. 
    In convallis facilisis libero ut interdum. Phasellus scelerisque ex in lacus tempus mollis. Integer scelerisque viverra elit id fringilla. Proin nibh arcu, imperdiet a lacus ac, feugiat interdum sapien. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse ultrices vestibulum orci, a varius quam cursus ut. Nulla ut suscipit sapien. Morbi et urna elementum, pretium augue non, tristique nulla. Nulla massa tellus, facilisis at fringilla et, rutrum ac libero.
</p>

如果我将鼠标悬停在第一行上方，是否可以突出显示第一行，如果我将鼠标悬停在第二行上方，是否可以突出显示第二行，依此类推？

插图:来源:http://www.crossboweducation.us/

我正在寻找适用于多行段落的解决方案。我不必在每个单词中手动添加跨度。

编辑(2016年6月21日):-(突出显示整个段落的解决方案)
Rory McCrossan 的解决方案基本上有效，但是当我尝试在我的 WordPress 博客中实现它时，突出显示出现了问题，一开始它工作得很好，我向下滚动了一下，突出显示位置计算错误。所以，我刚刚在这个网站上工作时发现了一个巧妙的解决方案，您需要加载 hover.css并添加类 hvr-fade给每个<p>标签...这当然不能解决最初的问题，但它是使用出色的 css 悬停效果集合轻松解决类似问题的另一种方法。希望这对某人有帮助...

Answer 1

没有直接的方法可以在较大的元素中获取单行文本。为了达到您的要求，您可以将 p 标记的每个单词包装在其自己的 span 中。然后，将鼠标悬停在 span 标记上，您可以突出显示位于相同 offset().top 的同级标记。像这样的事情:

$('p').html(function() {
    return $(this).text().replace(/\w+[,.]?\s+?/g, "<span>$&</span>")
});

$('p').on('mouseenter', 'span', function() {
    var $span = $(this);
    $('p span').filter(function() {
        return $(this).offset().top == $span.offset().top;
    }).toggleClass('hover');
}).on('mouseleave', 'span', function() {
    $('p span').removeClass('hover');
})

Working example

或者，您可以将单个 div 元素附加到 p 的父级，当鼠标悬停在 p 上时，该元素会跟随鼠标移动并执行操作作为行阅读指南:

$('.text-block')
    .append('<div class="line-marker">&nbsp;</div>')
    .on('mousemove', function(e) {
        $(this).find('.line-marker').css('top', e.clientY);
    })

.line-marker {
    display: none;
}

.text-block:hover .line-marker {
    position: absolute;
    width: 100%;
    background-color: #CC0;
    display: block;
    z-index: -1;
}

Working example