前端----HTML/JS 鼠标停留和移开实例----鼠标指示时显示二级菜单(共三级)
生活随笔
收集整理的這篇文章主要介紹了
前端----HTML/JS 鼠标停留和移开实例----鼠标指示时显示二级菜单(共三级)
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
onmouseover和onmouseout事件和各種position定位的練習(xí),
效果是鼠標(biāo)指示一級菜單顯示二級菜單, 指示二級菜單的選項出現(xiàn)相應(yīng)三級菜單
效果圖:
?
?
一級菜單:
?
鼠標(biāo)停留時的二級菜:
?
三級:
有一個小技巧效果就是二級菜單出現(xiàn)時 , 一級菜單的右邊框 消失,和二級菜單連起來 ,
其實是二級菜單的大div下加了一個白塊div, 調(diào)整position使之覆蓋交界處的邊框,達(dá)到隱藏的效果
?
其實我本來的想法是通過JS調(diào)整一級菜單的右邊框顏色,后來發(fā)現(xiàn)一級菜單作為父元素 總是被壓在二級菜單之下,
也就是一級菜單的右邊框消失了,二級菜單的左邊框還在,不能產(chǎn)生如圖效果:
?
?
鼠標(biāo)停留打開下級窗口,移開時隱藏
顯示和隱藏的切換是用JS對div的display屬性的調(diào)整,
block是以塊元素顯示,none是不顯示,并且不保留位置(visibility屬性有些類似,可以隱藏并保留位置)
還有一個細(xì)節(jié)問題就是 onmouseover事件是鼠標(biāo)懸停在元素上觸發(fā),
那么鼠標(biāo)從一級窗口到二級窗口時還會觸發(fā)一級窗口的onmouseover事件嗎?
答案是會的,該事件不只對自身懸停有效,子元素也能觸發(fā)一級窗口的該事件
?
為什么要提這個呢,因為有另一個懸停事件對子元素不生效:
- mouseenter:鼠標(biāo)移入元素范圍內(nèi)觸發(fā)，該事件不冒泡，即鼠標(biāo)移到其后代元素上時不會觸發(fā)。
該事件如果用到這個例子上的效果就是鼠標(biāo)指向一級窗口時, 二級窗口出現(xiàn),
當(dāng)你想指二級窗口上的選項時, 二級窗口消失了,就是說你永遠(yuǎn)創(chuàng)建不出三級窗口
?
下邊是源代碼, js和css 和HTML分成了三份? ,HTML 有些長,都是重復(fù)性的,只是文本不同:
?
<!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>技術(shù)</b> Java PHP C++ 區(qū)塊鏈<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')">后端開發(fā)<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')">移動開發(fā)<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')">前端開發(fā)<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>產(chǎn)品</b> 產(chǎn)品總監(jiān) 產(chǎn)品經(jīng)理 數(shù)據(jù)產(chǎn)品經(jīng)理<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')">產(chǎn)品經(jīng)理<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')">產(chǎn)品設(shè)計師<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>設(shè)計</b> UI設(shè)計師 交互設(shè)計 網(wǎng)頁設(shè)計師<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')">視覺設(shè)計<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')">交互設(shè)計<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> 新媒體運營 編輯 數(shù)據(jù)運營<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"; }?
歡迎指正!
總結(jié)
以上是生活随笔為你收集整理的前端----HTML/JS 鼠标停留和移开实例----鼠标指示时显示二级菜单(共三级)的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 计算机网络之基本计量单位和进制转换
- 下一篇： 2017年html5行业报告,云适配发布