Javascript jQuery-悬停时追加内容

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

当鼠标悬停在这3个框中的一个上时，我需要将项目内容本身附加到特色框中

注意：特色框将默认附加第一项

代码：

<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>

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

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

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

1-Lorem ipsum dolor sit amet。




1-Lorem ipsum dolor sit amet。




2-Lorem ipsum dolor sit amet。




3-Lorem ipsum dolor sit amet。

好，我在这个网站上的第一篇帖子

这个怎么样：

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


});

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

//或者，您可以在特色内容附加项目内容后删除该项目

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

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

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

终于修好了

演示：

代码：

<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>

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

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

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

---

项目在每次悬停时都会重复，请看我如何防止重复？您能检查/更新JSFIDLE吗？我需要防止重复的特色内容，一旦在正常的项目，不要删除项目，一旦我在它悬停。对不起，我不明白你的要求。当您将鼠标悬停在项目上时，是否只想更改特色内容的innerHTML？我看不到您试图解决您的问题。发布您尝试过的JavaScript。另外，是否要将最后三个列表项的内容附加到第一个列表项，或替换第一个列表项的内容？是，替换第一个列表项的内容。