摘要:
运用 DOM 操作元素知识点,记住鼠标的各类事件,利用 for 循环处理事件,该项练习考察 HTML + CSS + JavaScript 的运用,首先用 HTML 准备几个盒子模型,一开始想到下拉菜单用到标签 select 中的 option ,但经过实践,决定采用 <ul> 和 <li> 标签 还有链接标签 <a> 。第二部给 HTML 的盒子模型添加 CSS 样式,此处十分注意盒子模型的大小(本人在此耗费时间过多,基础不牢的缘故),下拉列表的箭头可以用字体图标表示,icomoon 字库 http://icomoon.io 上可以找到很多字体图标 。最后,给盒子添加 JavaScript 效果,先获取元素 ,后注册事件 鼠标经过触发 onmouseover ,当鼠标离开触发 onmouseout ,由于是多个小 li 之间的操作,想到用 for 循环 可以使每个子元素都实现触发效果。
代码如下:
HTML 代码:
<div class="nav">
<li class="item">
<a href='#' class="web">微博</a>
<ul>
<li>
<a href='#'>私信</a>
</li>
<li>
<a href='#'>评论</a>
</li>
<li>
<a href='#'>@我</a>
</li>
</ul>
</li>
</div>
CSS样式属性:
<!-- CSS样式属性 注意css优先级、盒子大小的计算方法 -->
<style>
/* 字体图标*/
@font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.eot?3nf2od');
src: url('fonts/icomoon.eot?3nf2od#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf?3nf2od') format('truetype'),
url('fonts/icomoon.woff?3nf2od') format('woff'),
url('fonts/icomoon.svg?3nf2od#icomoon') format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
}
li {
list-style: none;
}
a {
text-decoration: none;
font-size: 18px;
color: #333;
}
.nav {
position: relative;
margin: 5px;
padding: 5px;
width: 100px;
height: 50px;
line-height: 20px;
}
.nav ul {
margin: 0;
padding: 0;
display: none;
}
.nav>.item a:hover {
color: orange;
background: #fef5d7;
}
.nav .web {
display: block;
padding-left: 20px;
padding-right: 1px;
width: 80px;
line-height: 20px;
padding-top: 10px;
padding-bottom: 10px;
/* margin-bottom: -4px; */
background: transparent;
/* background: #ced0d2; */
font-size: 18px;
}
.nav>li>.web:hover {
background: #ced0d2;
}
.nav::after {
position: absolute;
top: 8px;
right: 10px;
font-family: 'icomoon';
content: '\ea50';
color: orange;
font-size: 24px;
}
.nav>ul>li {
display: block;
padding-left: 100px;
width: 80px;
height: 20px;
padding-top: 6px;
margin: -1px -1px 0px -1px;
font-size: 18px;
}
.nav ul li a {
display: block;
padding-left: 20px;
width: 80px;
height: 20px;
padding-top: 12px;
margin-top: -1px;
padding-bottom: 12px;
align-content: center;
border: 1px solid orange;
}
</style>
JavaScript 代码:
<script>
// 1.获取元素 nav 和 lis
var nav = document.querySelector('.nav');
var lis = nav.children;
// 2. 注册事件,鼠标经过就触发(onmouseover),鼠标离开不触发(onmouseout)
for (var i = 0; i < lis.length; i++) {
lis[i].onmouseover = function () {
this.children[1].style.display = 'block';
}
lis[i].onmouseout = function () {
this.children[1].style.display = 'none';
}
}
</script>
效果图:
★★★ 欢迎批评指正!
扫描二维码关注公众号,回复:
15623043 查看本文章