精品展示案例

小蔡不会编码

于 2022-10-12 10:41:20 发布

阅读量30

点赞数

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/weixin_68250871/article/details/127278093

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			* {
				margin: 0px;
				padding: 0px;
			}

			ul li {
				list-style: none;
			}

			a {
				text-decoration: none;
			}

			#a {
				width: 300px;
				height: 260px;
				border: 2px solid pink;
				margin: 10px auto;
				overflow: hidden;
			}

			#b {
				float: left;
				width: 80px;
				font-weight: 700;
			}

			#c {

				width: 200px;
				float: right;
			}

			#b ul li a {
				display: inline-block;
				width: 80px;
				height: 30px;
				border: 1px solid pink;
				padding-top: 5px;
				text-align: center;
				background-color: antiquewhite;
				color: black;
			}

			img {
				margin-top: 10px;
			}

			#b a:hover {
				background-color: blue;
			}
		</style>
		<script src="js/jquery.min.js"></script>
		<script>
			$(function() {
				$("#b>ul li").mouseover(function() {
					var index = $(this).index();
					$("#c>ul li:eq(" + index + ")").fadeIn(1000).siblings().hide();
				});
			});
		</script>
	</head>
	<body>
		<div id="a">
			<div id="b">
				<ul>
					<li><a href="#">冬裙</a></li>
					<li><a href="#">毛衣</a></li>
					<li><a href="#">棉服</a></li>
					<li><a href="#">呢大衣</a></li>
					<li><a href="#">牛仔裤</a></li>
					<li><a href="#">女裤</a></li>
					<li><a href="#">女靴</a></li>
					<li><a href="#">雪地靴</a></li>
					<li><a href="#">羽绒服</a></li>
				</ul>
			</div>
			<div id="c">
				<ul>
					<li><img src="img/冬裙.jpg" /></li>
					<li><img src="img/毛衣.jpg" /></li>
					<li><img src="img/棉服.jpg" /></li>
					<li><img src="img/呢大衣.jpg" /></li>
					<li><img src="img/牛仔裤.jpg" /></li>
					<li><img src="img/女裤.jpg" /></li>
					<li><img src="img/女靴.jpg" /></li>
					<li><img src="img/雪地靴.jpg" /></li>
					<li><img src="img/羽绒服.jpg" /></li>
				</ul>
			</div>
		</div>
	</body>
</html>