案例：新浪下拉菜单

2023-08-09 05:29| 来源: 网络整理| 查看: 265

案例：下拉菜单

在这里插入图片描述

案例分析：

（1）导航栏里面的 li 都要有鼠标经过效果，所以需要循环注册鼠标事件。

（2）核心原理：当鼠标经过 li 里面的第二个孩子 ul 时，显示，当鼠标离开，则 ul 隐藏。

实现代码：

DOCTYPE html> 新浪下拉菜单 * { margin: 0; padding: 0; } li { list-style: none; } a { text-decoration: none; font-size: 14px; } .nav { margin: 100px; border-top: 2px solid #ff8500; } .nav>li { position: relative; float: left; width: 100px; height: 41px; text-align: center; } .nav li a { display: block; width: 100%; height: 100%; line-height: 41px; color: #333; } .nav>li:hover { background-color: #eee; } .nav>li>a:hover { background-color: #eee; color: #ff8400; } .nav ul { /* 隐藏 */ display: none; position: absolute; top: 41px; left: 0; width: 100%; border-left: 1px solid #FECC5B; border-right: 1px solid #FECC5B; } .nav ul li { border-bottom: 1px solid #fecc5b; } .nav ul li a:hover { background-color: #fff5da; } 微博私信评论 @我博客博客评论未读提醒邮箱免费邮箱 VIP邮箱企业邮箱新浪邮箱客户端网站导航 // 案例分析： // 1.导航栏里面的li都要有鼠标经过效果，所以需要循环注册鼠标事件 // 2.核心原理：当鼠标经过li里面的第二个孩子 ul显示，当鼠标离开，则ul隐藏 // 1.获取元素 var nav = document.querySelector('.nav'); var lis = nav.children; // 得到4个小li // 2.循环注册事件 for (var i = 0; i this.children[1].style.display = 'block'; } lis[i].onmouseout = function () { this.children[1].style.display = 'none'; } }

【本文地址】

公司简介

联系我们