前端----HTML/JS 滑鼠停留和移開例項----滑鼠指示時顯示二級選單(共三級)

NO0b發表於2018-09-25
前端HTMLJS

onmouseover和onmouseout事件和各種position定位的練習,

效果是滑鼠指示一級選單顯示二級選單, 指示二級選單的選項出現相應三級選單

效果圖:

 

 

一級選單:

 

滑鼠停留時的二級菜:

 

三級:

有一個小技巧效果就是二級選單出現時 , 一級選單的右邊框 消失,和二級選單連起來 ,

其實是二級選單的大div下加了一個白塊div, 調整position使之覆蓋交界處的邊框,達到隱藏的效果

 

其實我本來的想法是通過JS調整一級選單的右邊框顏色,後來發現一級選單作為父元素 總是被壓在二級選單之下,

也就是一級選單的右邊框消失了,二級選單的左邊框還在,不能產生如圖效果:

 

 

滑鼠停留開啟下級視窗,移開時隱藏

顯示和隱藏的切換是用JS對div的display屬性的調整,

block是以塊元素顯示,none是不顯示,並且不保留位置(visibility屬性有些類似,可以隱藏並保留位置)

還有一個細節問題就是 onmouseover事件是滑鼠懸停在元素上觸發,

那麼滑鼠從一級視窗到二級視窗時還會觸發一級視窗的onmouseover事件嗎?

答案是會的,該事件不只對自身懸停有效,子元素也能觸發一級視窗的該事件

 

為什麼要提這個呢,因為有另一個懸停事件對子元素不生效:

  • mouseenter:滑鼠移入元素範圍內觸發，該事件不冒泡，即滑鼠移到其後代元素上時不會觸發。

該事件如果用到這個例子上的效果就是滑鼠指向一級視窗時, 二級視窗出現,

當你想指二級視窗上的選項時, 二級視窗消失了,就是說你永遠建立不出三級視窗

 

下邊是原始碼, js和css 和HTML分成了三份  ,HTML 有些長,都是重複性的,只是文字不同:

 

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
		<title>拉勾</title>
		<link href="lagou.css" rel="stylesheet" type="text/css"/>
	</head>
	<body>
		<div id="bigA" class="big_menu" onmouseover="myMouseOver('mid_container_A')" onmouseout="myMouseOut('mid_container_A')">
			<b>技術</b>  Java PHP C++ 區塊鏈
			<div id="mid_container_A" class="mid_container" >
				<div id="div_empty"></div>
				<div id="mid_A_1" class="mid" onmouseover="myMouseOver('small_A_1')" onmouseout="myMouseOut('small_A_1')">
					後端開發
					<div id="small_A_1" class="small_menu">這裡是三級視窗...</div>
				</div>
				<div id="mid_A_2" class="mid" onmouseover="myMouseOver('small_A_2')" onmouseout="myMouseOut('small_A_2')">
					移動開發
					<div id="small_A_2" class="small_menu">這裡是三級視窗...</div>
				</div>
				<div id="mid_A_3" class="mid" onmouseover="myMouseOver('small_A_3')" onmouseout="myMouseOut('small_A_3')">
					前端開發
					<div id="small_A_3" class="small_menu">這裡是三級視窗...</div>
				</div>
			</div>
		</div>
		<div id="bigB" class="big_menu" onmouseover="myMouseOver('mid_container_B')" onmouseout="myMouseOut('mid_container_B')">
			<b>產品</b>  產品總監 產品經理 資料產品經理
			<div id="mid_container_B" class="mid_container" >
				<div id="div_empty"></div>
				<div id="mid_B_1" class="mid" onmouseover="myMouseOver('small_B_1')" onmouseout="myMouseOut('small_B_1')">
					產品經理
					<div id="small_B_1" class="small_menu">這裡是三級視窗...</div>
				</div>
				<div id="mid_B_2" class="mid" onmouseover="myMouseOver('small_B_2')" onmouseout="myMouseOut('small_B_2')">
					產品設計師
					<div id="small_B_2" class="small_menu">這裡是三級視窗...</div>
				</div>
				<div id="mid_B_3" class="mid" onmouseover="myMouseOver('small_B_3')" onmouseout="myMouseOut('small_B_3')">
					高階職位
					<div id="small_B_3" class="small_menu">這裡是三級視窗...</div>
				</div>
			</div>
		</div>
		<div id="bigC" class="big_menu" onmouseover="myMouseOver('mid_container_C')" onmouseout="myMouseOut('mid_container_C')">
			<b>設計</b>  UI設計師 互動設計 網頁設計師
			<div id="mid_container_C" class="mid_container" >
				<div id="div_empty"></div>
				<div id="mid_C_1" class="mid" onmouseover="myMouseOver('small_C_1')" onmouseout="myMouseOut('small_C_1')">
					視覺設計
					<div id="small_C_1" class="small_menu">這裡是三級視窗...</div>
				</div>
				<div id="mid_C_2" class="mid" onmouseover="myMouseOver('small_C_2')" onmouseout="myMouseOut('small_C_2')">
					互動設計
					<div id="small_C_2" class="small_menu">這裡是三級視窗...</div>
				</div>
				<div id="mid_C_3" class="mid" onmouseover="myMouseOver('small_C_3')" onmouseout="myMouseOut('small_C_3')">
					使用者研究
					<div id="small_C_3" class="small_menu">這裡是三級視窗...</div>
				</div>
			</div>
		</div>
		<div id="bigD" class="big_menu" onmouseover="myMouseOver('mid_container_D')" onmouseout="myMouseOut('mid_container_D')">
			<b>運營</b>  新媒體運營 編輯 資料運營
			<div id="mid_container_D" class="mid_container" >
				<div id="div_empty"></div>
				<div id="mid_D_1" class="mid" onmouseover="myMouseOver('small_D_1')" onmouseout="myMouseOut('small_D_1')">
					運營
					<div id="small_D_1" class="small_menu">這裡是三級視窗...</div>
				</div>
				<div id="mid_D_2" class="mid" onmouseover="myMouseOver('small_D_2')" onmouseout="myMouseOut('small_D_2')">
					編輯
					<div id="small_D_2" class="small_menu">這裡是三級視窗...</div>
				</div>
				<div id="mid_D_3" class="mid" onmouseover="myMouseOver('small_D_3')" onmouseout="myMouseOut('small_D_3')">
					客服
					<div id="small_D_3" class="small_menu">這裡是三級視窗...</div>
				</div>
			</div>
		</div>
	</body>
	<script type="text/javascript" src="lagou.js" defer></script>
</html>

 

.big_menu{
	width:300px;
	height:50px;
	border: 2px solid rgb(234, 238, 237);
	position:relative;
	line-height:50px;
	color:#555;
}
.mid_container{
	width:400px;
	height:300px;
	border: 1px solid rgb(234, 238, 237);
	position:relative;
	left:300px;
	display: none;
	bottom:50px;
	line-height:30px;
}
.small_menu{
	width:300px;
	height:200px;
	border: 1px solid rgb(234, 238, 237);
	position:relative;
	left:100px;
	bottom:20px;
	display: none;	
	background-color:rgb(234, 238, 237);
}
.mid{
	width:150px;
	height:30px;
	font-size:30px;
	margin-bottom:30px;
	margin-left:30px;
}
#div_empty{
	position:absolute;
	width:6px;
	height:50px;
	background-color:white;
	left:-2px;
}

 


function myMouseOver(next)
{	
	var next=document.getElementById(next);
	next.style.display="block";
}
function myMouseOut(next)
{
	var next=document.getElementById(next);
	next.style.display="none";
}

 

歡迎指正!

相關文章