我有 4 个列表项,第一个为特色框,其他 3 个项具有正常内容。
当鼠标悬停在这 3 个框之一时,我需要将项目内容本身 append 到特色框。
注意:特色框将默认 append 第一项。
代码:
<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&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&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&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&text=News" alt="">
</li><!-- End Item -->
</ul>
最佳答案
好的,我在这个网站上的第一篇文章。
这个怎么样:
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();
});
关于javascript - jQuery - 在悬停时 append 内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23030051/