<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<ul id="mv">
<li>西施</li>
<li>貂蝉</li>
<li>王昭君</li>
<li>杨玉环</li>
<li>芙蓉姐姐</li>
</ul>
<script>
// 1 隔行变色
// 获取到所有的li，判断奇数行和偶数行
var mv = document.getElementById('mv');
var lists = mv.getElementsByTagName('li');
for (var i = 0; i < lists.length; i++) {
var li = lists[i];
// 判断当前的li 是奇数行 还是偶数行
if (i % 2 === 0) {
// i是偶数 ， 但是当前是奇数行
// 设置奇数行的背景颜色
li.style.backgroundColor = 'red';
} else {
// 设置偶数行的背景颜色
li.style.backgroundColor = 'green';
}
}
// 2 鼠标放上高亮显示
//
// 2.0 给所有的li 注册事件 鼠标经过和鼠标离开的两个事件
for (var i = 0; i < lists.length; i++) {
var li = lists[i];
// 2.1 鼠标放到li上，高亮显示当前的li
var bg;
li.onmouseover = function () {
// 鼠标放到li上的时候，应该记录li当前的颜色
bg = this.style.backgroundColor;
this.style.backgroundColor = 'yellow';
}
// 2.2 鼠标离开li，还原原来的颜色
li.onmouseout = function () {
// 鼠标离开，还原原来的颜色
this.style.backgroundColor = bg;
}
}
</script>
</body>
</html>
