如何實(shí)現(xiàn)鼠標(biāo)經(jīng)過(guò)顯示DIV，離開(kāi)隱藏DIV
2018-11-01 來(lái)源：學(xué)做網(wǎng)站論壇
鼠標(biāo)經(jīng)過(guò)顯示DIV,移開(kāi)隱藏DIV，這在制作網(wǎng)站二級(jí)導(dǎo)航菜單時(shí)，經(jīng)常用到。
它的原理就是當(dāng)鼠標(biāo)經(jīng)過(guò)時(shí)觸發(fā)“顯示”事件，鼠標(biāo)離開(kāi)時(shí)觸發(fā)“隱藏”事件。這樣的功能需要借助JQUERY。下面學(xué)做網(wǎng)站論壇來(lái)講一下如何實(shí)現(xiàn)鼠標(biāo)經(jīng)過(guò)顯示DIV,離開(kāi)隱藏DIV功能�！救绻銓�(duì)代碼一點(diǎn)不懂，可以學(xué)習(xí)一下html入門(mén)教程】
方法/步驟
- 給鼠標(biāo)經(jīng)過(guò)的DIV添加一個(gè)類 ，類名為submeau；如下圖：
- 給顯示或者隱藏的DIV，添加一個(gè)ID，ID名為:id="oa_submeau"，如下圖：
- 將以下的JQUERY代碼放在整個(gè)網(wǎng)頁(yè)的最底部，用于控制鼠標(biāo)經(jīng)過(guò)顯示DIV,離開(kāi)隱藏DIV。
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
$("#oa_submeau").hide();
? $(".submeau").hover(function () {
? $("#oa_submeau").show();
? }, function () {
? $("#oa_submeau").hide();
? })
? // 鼠標(biāo)移動(dòng)到list的div上的時(shí)候list div不會(huì)被隱藏
? $("#oa_submeau").hover(function () {
? $("#oa_submeau").show();
? }, function () {
? $("#oa_submeau").hide();
? })
? </script>
這樣就可以實(shí)現(xiàn)鼠標(biāo)經(jīng)過(guò)某個(gè)區(qū)域時(shí)顯示隱藏的DIV，離開(kāi)時(shí)再次隱藏DIV�！緸楸苊庑率謱W(xué)建網(wǎng)站不懂代碼，這里提示了示例代碼下載：https://pan.baidu.com/s/1yOT_-TXvRarWhoqv064I0w】
標(biāo)簽： 代碼 建網(wǎng)站 學(xué)建網(wǎng)站 制作網(wǎng)站
版權(quán)申明：本站文章部分自網(wǎng)絡(luò)，如有侵權(quán)，請(qǐng)聯(lián)系：west999com@outlook.com
特別注意：本站所有轉(zhuǎn)載文章言論不代表本站觀點(diǎn)！
本站所提供的圖片等素材，版權(quán)歸原作者所有，如需使用，請(qǐng)與原作者聯(lián)系。
