购物网站的简单菜单栏

最新推荐文章于 2021-11-25 15:46:37 发布

linqingyu310

最新推荐文章于 2021-11-25 15:46:37 发布

阅读量574

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/linqingyu310/article/details/38585085

版权

js 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

效果如图所示，即鼠标悬浮在左边红色部分，右边绿色部分出现，鼠标移出绿色部分，绿色消失。

代码：

<html>
<head>
	<title></title>
	<style>
		*{margin:0;padding:0;}
		ul{
			list-style:none;	
			position:relative;
		}
		.first{
			margin:20px;		
		}
		.second{
			position:absolute;		
			display:none;			
			left:100px;
			top:0;
		}
		.first > li{
			width:100px;
			height:20px;
			background-color:red;
			margin-bottom:10px;	
		}
		.second li{
			width:600px;
			height:500px;
			background-color:green;
		}
	</style>
	<script src="jquery-1.11.1.min.js"/></script>
    <script type="text/javascript">
	$(document).ready(function(){
		$(".first > li").hover(
			function(){
				var index=$(".first >  li").index(this);
				$(".second").css("display","none");
				$(".second").eq(index).css("display","inline");
			},
			function(){
				$(".second").css("display","none");
			}
		);		
	});
	</script>
</head>
<body>
	<ul class="first">
		<li>
			1
			<ul class="second">
				<li>11</li>
			</ul>
		</li>
		<li>
			2
			<ul class="second">
				<li>21</li>
			</ul>
		</li>
		<li>
			3
			<ul class="second">
				<li>31</li>
			</ul>
		</li>
		<li>
			4
			<ul class="second">
				<li>41</li>
			</ul>
		</li>	
	<ul>
</body>
</html>