Question

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

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


});

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

//或者您可以在精选内容附加项目内容

后删除该项目

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

终于修好!!

演示：JSFIDDLE

<强>码

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

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

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

jQuery - 在悬停时附加内容

2 个答案: