Hover on list item to get definition, place in different div

I have a couple questions.

This is an example of what i'm trying to make —

http://i.stack.imgur.com/wGd5i.jpg

Theres a list of links in a scroll box. Beside that box theres another box that would hold a definition of the link.

My first question is, how would I grab the definition for each list item and place it in the other box?

My second question is, what would be the proper HTML tag/attribute to hold the definition of the list items in?

I'm n开发者_JAVA技巧ot all that new to jQuery. just don't know about this.

As for your second question, try <dl><dt><dd>. Where

<dl> = dictionary list
    <dt> = dictionary term </dt>
    <dd> = dictionary definition </dd>
</dl>

To use this with your project, you could hide the <dd> tag display:none. When the <dt> is hovered, use Javascript to pull the sibling element and place it's contents into that box on the right.

Edit

jQuery(function($){
    $('dt').hover(function(){
        var turnip = $(this).next('dd').html();
        $('#fullDefinitionBox').html(turnip);
    },function(){
        $('#fullDefinitionBox').html(' ');
    });
});