【前端小实战】实现手风琴特效

最新推荐文章于 2024-07-17 23:28:09 发布

Fetters04

最新推荐文章于 2024-07-17 23:28:09 发布

阅读量1.2k

点赞数 2

文章标签：前端 css html

本文链接：https://blog.csdn.net/qq_53569667/article/details/128747165

版权

文章目录

一、效果展示
二、完整代码

一、效果展示

在这里插入图片描述

二、完整代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		<style type="text/css">
			body {
				background-color: #f6f6f6;
			}
			
			#box ul li {
				float: left;
				list-style: none;
				width: 200px;
				height: 250px;
				text-align: center;
				background-color: white;
				box-shadow: 3px 2px 30px rgba(0, 0, 0, 0.1);
				position: relative;
				
				/* 元素属性发生改变时延迟1s,淡出效果 */
				transition: all 1s ease-out;  
			}
			
			#box ul li a {
				text-decoration: none;
			}
			
			#box ul li img {
				height: 170px;
				position: absolute;
				right: 15px;
			}
			
			#box ul li .title {
				width: 100%;
				height: 30px;
				margin-top: 20px;
				font-size: 16px;
				color: #333;
			}
			
			#box ul li .sub {
				width: 100%;
				height: 30px;
				font-size: 14px;
				color: #666;
			}
			
			#box ul li .btn {
				display: none;
			}
			
			
			/* 被标注后的样式 */
			#box ul .on {
				width: 400px;
				padding-left: 30px;
			}
			
			#box ul .on .title {
				text-align: left;
				color: black;
			}
			
			#box ul .on .sub {
				text-align: left;
				color: black;
			}
			
			#box ul .on img {
				height: 230px;
				bottom: 0;
				right: 0;
			}
			
			#box ul .on .btn {
				width: 75px;
				height: 34px;
				line-height: 34px;
				display: block;
				color: black;
				border: 2px solid black;
				border-radius: 19px;
				margin-top: 30px;
			}
		</style>
	</head>
	<body>
		<div id="box">
			<ul>
				<!-- 被 on 标识的元素突出显示 -->
				<li>
					<a href="#">
						<div class="title">新机首发</div>
						<div class="sub">有新机更有范</div>
						<div class="btn">Go</div>
						<img src="img/jd_1_phone.png"/>
					</a>
				</li>
				
				<li>
					<a href="#">
						<div class="title">游戏手机</div>
						<div class="sub">白条24期免息</div>
						<div class="btn">Go</div>
						<img src="img/jd_2_phone.png"/>
					</a>
				</li>
				
				<li>
					<a href="#">
						<div class="title">手机好货</div>
						<div class="sub">爆款现货抢购</div>
						<div class="btn">Go</div>
						<img src="img/jd_3_phone.png"/>
					</a>
				</li>
				
				<li>
					<a href="#">
						<div class="title">手机配件</div>
						<div class="sub">低至9.9</div>
						<div class="btn">Go</div>
						<img src="img/jd_4_phone.png"/>
					</a>
				</li>
			</ul>
		</div>
	</body>
	
	<!-- 导入jQuery -->
	<script src="jquery-3.6.3.js"></script>
	<script type="text/javascript">
		// 鼠标经过谁，谁就被突出显示，加上 class="on" 并将兄弟元素的 on 移除
		$("#box ul li").hover(function() {
			$(this).addClass("on").siblings().removeClass("on");
		})
	</script>
</html>