Highlight paragraph line by line on hover [duplicate]

Answer 1

There's no direct way to get a single line of text within a larger element. To achieve what you require you could wrap each word of the p tag in its own span. Then on hover of the span tags you can highlight the siblings which are at the same offset().top. Something like this:

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

$('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

Alternatively you could append a single div element to a parent of the p which follows the mouse movement when hovered over the p and acts as a line reading guide:

$('.text-block')
    .append('
 
')
    .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