jQuery move element vertically with mousemove and Select text on mouseover

Question

I am trying to do exactly what this webpage is using with share lyrics image(button).

http://www.metrolyrics.com/just-give-me-a-reason-lyrics-pink.html

2 things are happening here I want:

1. There is some lines' text is selected and saved inside some variable for further use.
2. The share lyrics image moving with mouse vertically.

I know this is something with jQuery, but I'm a novice of jQuery.

Done all my research but I was not able to find proper match that suits my need. I read docs at jQueryUI(http://jqueryui.com/position/) as well but not getting what I want.

Can somebody help me with this please?

HELP This is a little code I'm trying to use but the hover function doesn't seem to be working.

function appendText()

{

var txt1="Text.
";              // Create text with HTML

var txt2=$("
").text("Text.");  // Create text with jQuery

$("body").append(txt1,txt2);        // Append new elements

}

$('.line').hover(function(){

   $('.line').removeClass('hover');

   $(this).addClass('hover');

});

Answer 1

its very simple:

on that website ever row is a div when on hover it lets jquery insert an hover class into that div $().addClass('hover'); (and the folowing 3 divs). and in css it says that the div with a hover class div.hover has another background.

code that could have been used:

$('.line').hover(function(){
   $('.line').removeClass('hover');
   $(this).addClass('hover').next().addClass('hover').next().addClass('hover').next().addClass('hover');
});

css:

.line.hover {
background-color: #3333FF; //some colllor
}

to get the selected text:

 $('.hover').text()

or

$('.hover').each(function(){ 
$(this).text();
}

move the image to first selected div:

$('.line').hover(function(){
   $('.line').removeClass('hover');
   $("#share-image").appendTo(this);
.appendTo("#destination");$(this).addClass('hover').next().addClass('hover').next().addClass('hover').next().addClass('hover');
});