javascript - jQuery - 在悬停时 append 内容

Question

我有 4 个列表项，第一个为特色框，其他 3 个项具有正常内容。

当鼠标悬停在这 3 个框之一时，我需要将项目内容本身 append 到特色框。

注意:特色框将默认 append 第一项。

JSFIDDLE

代码:

<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

好的，我在这个网站上的第一篇文章。

这个怎么样:

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

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

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

    });

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

//如果不想重复内容，也可以添加条件语句 添加到精选:

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


});

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

//或者您可以在特色内容 append 到项目内容后删除该项目

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

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

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