jQuery - append content on hover

Question

I have 4 list items, first one as a featured box, and other 3 items have normal content.

when hover on one of these 3 boxes, i need to append item content itself to featured box.

note: featured box will append first item as default.

JSFIDDLE

code:

<ul class="items clearfix">
    <li class="item">
        <a href=""><h2 class="title">01 - Lorem ipsum</h2></a>
        <p class="description">
            1-Lorem ipsum dolor sit amet.
        </p>
        <img src="http://placehold.it/100x100/42bdc2/FFFFFF&amp;text=News" alt="">
    </li><!-- Featured Item -->

    <li class="item">
        <a href=""><h2 class="title">01 - Lorem ipsum</h2></a>
        <p class="description">
            1-Lorem ipsum dolor sit amet.
        </p>
        <img src="http://placehold.it/100x100/42bdc2/FFFFFF&amp;text=News" alt="">
    </li><!-- End Item -->

    <li class="item">
        <a href=""><h2 class="title">02 - Lorem ipsum</h2></a>
        <p class="description">
            2-Lorem ipsum dolor sit amet.
        </p>
        <img src="http://placehold.it/100x100/42bdc2/FFFFFF&amp;text=News" alt="">
    </li><!-- End Item -->

    <li class="item">
        <a href=""><h2 class="title">03 - Lorem ipsum</h2></a>
        <p class="description">
            3-Lorem ipsum dolor sit amet.
        </p>
        <img src="http://placehold.it/100x100/42bdc2/FFFFFF&amp;text=News" alt="">
    </li><!-- End Item -->
</ul>

Answer 1

Ok my first post on this site.

How about this:

var feat =$(".item").first();

var item =$(".item").next();

    item.mouseover(function(){
        feat.find("a:first-child").before($(this).html());

    });

/=================/

//you can also add a conditional statement if you do not want to repeat content once it is added to featured:

var feat =$(".item").first();

var item =$(".item").next();

item.mouseover(function(){

//if the post has the class featured do nothing
if($(this).hasClass("featured")){
    return;
}

//else append the featured box
else{         
    feat.find("a:first-child").before($(this).html());
    $(this).addClass("featured");
 }


});

/=================/

//or you can remove the item once the featured content is appended with the item's content

var feat =$(".item").first();

var item =$(".item").next();

item.mouseover(function(){
    feat.find("a:first-child").before($(this).html());
    $(this).closest("li").remove();
});

Answer 2

Finally fixed!!

demo: JSFIDDLE

code:

var feat =$(".item").first();

var item =$(".item").next();

item.mouseover(function(){
    featitem = $(this).html();
    feat.html(featitem);
    $(this).addClass("featured");
});