技術標籤：前端學習jquery前端

目錄

• 效果預覽
• 主體部分
• CSS部分
• jQuery部分

效果預覽

主體部分

<div class="wrap">
	<div class="list">
		<div class="hide">
			<p>君埋泉下泥銷骨—我寄人間雪滿頭</p>
		</div>
	</div>
	<div class="list">
		<div class="hide"
 
>
			<p>君埋泉下泥銷骨—我寄人間雪滿頭</p>
		</div>
	</div>
	<div class="list">
		<div class="hide">
			<p>君埋泉下泥銷骨—我寄人間雪滿頭</p>
		</div>
	</div>
	<div class="list">
		<div class="hide">
			<p>君埋泉下泥銷骨—我寄人間雪滿頭</
 
p>
		</div>
	</div>
</div>

CSS部分

body{
	margin: 0;
}
.wrap{
    width: 1090px;
    height: 429px;
    margin: 50px auto;
}
.list{
    float: left;
    width: 100px;
    height: 429px;
    background-image: url(/1.jpg);
    background-size: 789px 429px;
}
.list:nth-child(2){
    background-image
 
: url(/1.jpg);
}
.list:nth-child(3){
    background-image: url(/1.jpg);
}
.list:nth-child(4){
    background-image: url(/1.jpg);
    width: 789px;
}
.hide{
    width: 100px;
    height: 429px;
    background-color: rgba(0, 0, 0, 0.6);
}
p{
	margin: 0;
	color: #fff;
	margin: 0;
	padding: 43px;
}

jQuery部分

<script src="/js/jquery-3.5.1.min.js"></script>
<script>
	//1.給四個list繫結一個滑鼠懸停事件
	$(".list").hover(function(){
		//2.將滑鼠懸停為100寬度的圖片全部展示，其餘則收回
		$(this).stop().animate({
			width:'789px'
		},500).siblings().stop().animate({
			width:'100px'
		},500)
	});
</script>