Hovering over the paragraph will now allow you to shine a spotlight on

Question

Hovering over the paragraph will now allow you to shine a spotlight on

Can we highlight only the line being hovered over by the mouse pointer? For instance, if I have this paragraph:

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

Could we emphasize the first line when it is hovered over, followed by the second line and so on?

Illustration: https://i.sstatic.net/1D2T0.jpg Source:

I am interested in a solution that applies to multi-line paragraphs without manual span addition.

EDIT (21.06.2016): - (solution for entire paragraph highlighting)
Rory McCrossan's solution was effective, but I encountered issues with implementation on my WordPress blog. The highlighting position calculation went awry after scrolling. However, I stumbled upon an elegant solution while working on this website—you can use hover.css and add the class hvr-fade to each <p> tag. While this doesn't exactly address the original question, it offers a simple way to tackle a similar problem with impressive CSS hover effects collection. Hopefully, this proves beneficial to someone...

jquery html css

Answer 1

Answer №1

There isn't a direct method to extract a single line of text from a larger element. To accomplish this, you can wrap each word in the p tag with its own span. Then, by hovering over the span tags, you can highlight siblings that share the same offset().top value. Here's an example:

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

View working demo

Alternatively, you could add a single div element to a parent of the p, which moves along with the mouse cursor when hovering over the p and serves as a guide for reading lines:

$('.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;
}

View working demo

Answer 2

There isn't a direct method to extract a single line of text from a larger element. To accomplish this, you can wrap each word in the p tag with its own span. Then, by hovering over the span tags, you can highlight siblings that share the same offset().top value. Here's an example:

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

View working demo

Alternatively, you could add a single div element to a parent of the p, which moves along with the mouse cursor when hovering over the p and serves as a guide for reading lines:

$('.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;
}

View working demo

Hovering over the paragraph will now allow you to shine a spotlight on

Answer №1

Similar questions

Coordinating several navigation tabs and navigation bars in Bootstrap 4 to work together seamlessly

Activate a Tab using JavaScript in Vue.js

Executing PHP code discreetly

Is there a reason why it's not feasible to merge child/descendant and grouping selectors together?

The functionality of Angular material input fields is compromised when the css backface property is applied

Having trouble getting the CSS footer from cssstickyfooter.com to function properly

Capture the response from an AJAX request and store it in a JavaScript variable

jQuery, the magical tool that can make forms disappear and reappear in a blink

What steps should I take to address the issue with my navbar?

Firefox keeps track of the state of page elements

The 'success' message on the comment form gets displayed at the top of the page, but it is obscured by the fixed header

Ajax failing to trigger upon submission

What is the best way to dynamically hide a textbox in JSP based on the selection of a

Mouse over effect to highlight the crosshair on a table

What is the best way to utilize a JavaScript variable as a background within an inline style sheet?

I am experiencing an issue where the Angular md-sidenav is not opening within my CodePen environment

I cannot pinpoint the reason behind the strange offset on my page

Unable to open file:/// on localhost in the browser

Establishing the primary language on a multi-language website

Looping Angular Components are executed