<!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>