[英]jQuery - append content on hover
I have 4 list items, first one as a featured box, and other 3 items have normal content. 我有4个列表项,第一个是功能框,其他3个具有正常内容。
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. 注意:默认情况下,特色框将附加第一项。
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&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>
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: //如果不想在将内容添加到features中之后重复它们,也可以添加条件语句:
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();
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.