Highlight text lines on mouseover

Question

I am currently working on a site that will tell a lot of stories for people reading (mainly a blog). I want to make them as easy to read as possible, and I thought it would be useful to “highlight” lines of text with the cursor. As if following lines of text with your finger while reading a book.

I came across this answer , however I cannot get it to work on my page. This is also a pretty old answer, so maybe there is an improved version of this?

If anyone could help me, I would be forever grateful!

Answer 1

Wrote some jQuery code that, at least for me, looks and works better than the code in the post you're talking about. Hope this fits your needs :)

There's also a live demo at 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(); }); }); 

Answer 2

You indicated most of the answers and suggestions in an earlier post on SO to try to manipulate the DOM by adding spaces or divs for each line. But in fact, this is not a waterproof approach, as it is not compatible with multiple browsers, especially mobile browsers. You should use a dynamically processed jquery div that skips over the lines. The sabot must be dynamically positioned using the jquery function launched on mousemove, which calculates the jump of the div to the line height depending on the position of the mouse cursor.