#6.18
本节仍为鼠标事件的样例——实现css中hover变色类型的导航栏
具体理论相关标注在代码中
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>带有hover样式的导航栏</title>
</head>
<body>
<script>
var ul=document.createElement('ul'); //大框架:创建ul元素
ul.style.listStyle='none'; //去掉ul样式
ul.style.padding='0'; //内边距置0
var titleArr=['首页','军事','娱乐','新闻']; //创建数组
for(var i=0;i<titleArr.length;i++){ //for循环创建li
var li = document.createElement('li'); //创建li
li.style.cssText='width:80px;height:30px;line-height:30px;text-align:center;' +
'background-color:skyblue;display:inline-block'; //li的样式/cssText写法
li.innerHTML=titleArr[i]; //给对应序号的li赋值
ul.appendChild(li); //将li附在ul上
li.onmouseenter=function(){ //鼠标移入触发 不冒泡
//this在函数中使用,表示谁调用函数,它就是谁
//如果这里this是li的话,由于for循环执行速度过快,执行的li永远是最后一个
//也就是永远是最后一个变色
this.style.backgroundColor='orange'; //相当于hover变色
}
li.onmouseleave=function(){ //鼠标移出触发 不冒泡
this.style.backgroundColor='skyblue'; //变回skyblue
}
}
document.body.appendChild(ul); //大框架:附着在网页body中
</script>
</body>
</html>