html——鼠标移动到块显示菜单

我们在做前端布局的时候，当我们想要实现多层布局时，就会想到鼠标移动显示和消失显示菜单，就例如拉勾网的菜单特效，下面是一个简单点的实例：

showDiv.html:

<!DOCTYPE html>
<html>
	<head>
		<title>显示div</title>
		<link rel="stylesheet" type="text/css" href="show.css"/>
	</head>
	<body>
		<div class="menu">
			<div class="menu_1" onmouseover="show('showdiv1')" onmouseout="mOut('showdiv1')">
				<div class="menu_1_text1">技术</div>
				<div class="menu_1_text2">Java</div>
				<div class="menu_1_text2">PHP</div>
				<div class="menu_1_text2">C++</div>
				<div class="menu_1_img"></div>
				<div class="showdiv" id="showdiv1">
					<div class="showdiv_head">后端开发</div>
					<div class="showdiv_content">
						<div class="showdiv_content_text"  onmouseover="show('showdiv1_div2')" onmouseout="mOut('showdiv1_div2')">123
							<div id="showdiv1_div2" class="showdiv_content_text_info"></div>
						</div>
						<div class="showdiv_content_text" >123
							<div id="showdiv1_div2" class="showdiv_content_text_info"></div>
						</div>
					</div>
				</div>
			</div>
			<div class="menu_1" style="margin-top:20px;clear:both;"  onmouseover="show('showdiv2')" onmouseout="mOut('showdiv2')">
				<div class="menu_1_text1">技术</div>
				<div class="menu_1_text2">Java</div>
				<div class="menu_1_text2">PHP</div>
				<div class="menu_1_text2">C++</div>
				<div class="menu_1_img"></div>
				<div class="showdiv" id="showdiv2">
					<div class="showdiv_head">后端开发</div>
					<div class="showdiv_content">
						<div class="showdiv_content_text"  onmouseover="show('showdiv2_div2')" onmouseout="mOut('showdiv2_div2')">123
							<div id="showdiv2_div2" class="showdiv_content_text_info"></div>
						</div>
						<div class="showdiv_content_text"  onmouseover="show('showdiv2_div3')" onmouseout="mOut('showdiv2_div3')">123
							<div id="showdiv2_div3" class="showdiv_content_text_info"></div>
						</div>
					</div>
				</div>
			</div>
			<div class="menu_1" style="margin-top:20px;"  onmouseover="show('showdiv3')" onmouseout="mOut('showdiv3')">
				<div class="menu_1_text1">技术</div>
				<div class="menu_1_text2">Java</div>
				<div class="menu_1_text2">PHP</div>
				<div class="menu_1_text2">C++</div>
				<div class="menu_1_img"></div>
				<div class="showdiv" id="showdiv3">
					<div class="showdiv_head">后端开发</div>
					<div class="showdiv_content">
						<div class="showdiv_content_text"  onmouseover="show('showdiv3_div2')" onmouseout="mOut('showdiv3_div2')">123
							<div id="showdiv3_div2" class="showdiv_content_text_info"></div>
						</div>
						<div class="showdiv_content_text"  onmouseover="show('showdiv3_div3')" onmouseout="mOut('showdiv3_div3')">123
							<div id="showdiv3_div3" class="showdiv_content_text_info"></div>
						</div>
					</div>
				</div>
			</div>
		</div>
		
		<script>
			function show(obj){
				var div = document.getElementById(obj);
				div.style.display="block";
			}
			function mOut(obj){
				var div = document.getElementById(obj);
				div.style.display="none";
			}
		</script>
	</body>
</html>

show.css:


.menu{
	width:321px;
	height:400px;
	border:1px solid #aaa;
}

.menu_1{
	width:321px;
	height:55px;
	clear:both;
}

.menu_1_text1{
	float:left; 
	width:60px;
	height:60px;
	font-size:18px;
	line-height:60px;   
	margin-left: 21px;
}

.menu_1_text2{
	float:left;	
	width:60px;
	height:60px;
	font-size:14px;
	line-height:60px;
}

.menu_1_img{
	float:left;	
	width: 6px;
    margin-top: 24px;
    height: 11px;
    margin-left: 37px;
    background: url(http://www.lgstatic.com/www/static/index/modules/sidebar/img/arrow_92b8589.png) 0 0 no-repeat;
}

.showdiv{
	width:600px;
	height:400px;
	/* margin-top: -1px; */
	margin-left: 321px;
	display:none;
	background-color:#fff;
	border:1px solid #aaa;
}

.showdiv_head{
	width:600px;
	height:50px;
	line-height:60px;
	font-size:18px;
	background-color:#fff;
	margin-left: -2px;
}

.showdiv_content{
	width:600px;
	height:200px;
	line-height:60px;
	font-size:18px;
}

.showdiv_content_text{
	float:left;
	width:60px;
	height:20px;
	text-align:center;
	line-height:60px;
	font-size:14px;
}

.showdiv_content_text_info{
	float:left;
	width:50px;
	height:40px;
	margin-top: -17px;
	
	display:none;
	background-color:#faa;
	border:1px solid #aaa;
}

html——鼠标移动到块显示菜单

猜你喜欢