jquery – 在悬停时逐行突出显示段落[复制]

参见英文答案 > Highlight single line on mouse over4个
是否可以仅突出显示鼠标指针悬停的行？假设我有这个段落：

<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/

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

编辑(2016年6月21日)： – (解决方案突出整个段落)
Rory McCrossan的解决方案基本上起作用,但是当我尝试在我的wordpress博客中实现它时,突出显示有问题,首先它运行良好,我向下滚动一点,高亮位置计算错误.所以,我刚刚在这个网站上找到了一个简洁的解决方案,你需要加载hover.css并将类hvr-fade添加到每个< p>标签…这当然不会处理原始问题,但它是另一种使用强大的css悬停效果集合轻松解决类似问题的方法.希望这有助于某人……

解决方法

没有直接的方法可以在更大的元素中获得单行文本.为了达到您的要求,您可以将p标签的每个单词包装在自己的范围内.然后在悬停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',function() {
    $('p span').removeClass('hover');
})

Working example

或者,你可以将一个div元素追加到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