Highlight effect for one line of text in <div>
I want to recreate the effect shown in this violin
According to StackOverflow rules, I should apparently submit some code if I link to jsfiddle.net, so here's the main function from that link. To see the effect, though, you obviously have to follow the link.
$(document).ready(function() {
$(".textWrapper").hover(function() {
$(".highlight", this).show();
$(this).mousemove(function(e) {
var relativePos = e.pageY - this.offsetTop;
var textRow = (Math.ceil(relativePos / 18) * 18) - 18;
if (textRow >= 0) { $(".highlight", this).css("top", textRow + "px"); }
});
}, function() {
$(".highlight", this).hide();
});
});
Instead of highlighting the text in yellow, I would rather change the color of the text itself.
I want the text to be light gray and darkened when selected to bring that line into focus. This seems a lot more complicated than just changing the CSS, because the actual properties of the text don't change.
How to do it?
source to share
Take a look:
Using the same principle, I created 2 white div
#highTop
and opaque ones #highBot
to overlay the text when the mouse was hovering over it. Their properties height
and are top
set to the position of the pointer, so the main black text appears gray, except for the line that the mouse pointer is pointing to:
$(document).ready(function() {
$('#highTop').css('height', $('.textWrapper').height()).show();
$('.textWrapper').hover(function() {
$('#highBot').show();
$(this).mousemove(function(e) {
var relativePos = e.pageY - this.offsetTop;
var textRow = (Math.ceil(relativePos / 18) * 18) - 18;
if (textRow >= 0) {
// change height of #hightTop to make it cover upper part of text
$('#highTop').css('height', textRow + 'px');
// change position and height of #highBot to make it cover lower part of text
$('#highBot').css('height', $('.textWrapper').height() - 18 - textRow + "px")
.css('top', textRow + 18 + 'px');
}
});
}, function() {
// when the pointer goes out of the text, hide #highBot and make #highTop cover entire text
$('#highTop').css('height', $('.textWrapper').height() + 'px');
$('#highBot').hide();
});
});
source to share
I've done a bit of research and it seems like the only way this would be possible is to put each line in a separate HTML tag.
The reason this is not possible is because the div .highlight
does not contain the text itself, so you can only apply the overlay and not edit the text at the bottom.
It might help to take a look at http://jsbin.com/ukaqu3/91 which only displays certain lines of text.
source to share