jQuery - append content on hover

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>

Answers


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();
});

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");
});

Need Your Help

What is the most straightforward way to retrieve data from a local SQL Server database?

c# sql-server tsql database-connection adventureworks

I don't need/want any security measures (username/password, etc.) - I just want to create a simple example of retrieving data from the AdventureWorks "lite" database (AdventureWorksLT2012_Data.mdf),

jquery object need to fetch particular ID value from Ajax data

javascript php jquery ajax

Using Ajax able to receive the data. Now need to fetch particular id value.