<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul id="nav">
<li>今天是周五</li>
<li>今天是周六</li>
<li>今天是周日</li>
<li>今天是周一</li>
<li>今天是周二</li>
<li>今天是周三</li>
<li>今天是周四</li>
</ul>
<script>
var bg;//鼠标经过时,记录颜色
var lists = document.querySelectorAll('#nav li');
for(var i = 0;i <lists.length;i ++) {
if(i % 2 === 0) {
lists[i].style.backgroundColor = 'red';
} else {
lists[i].style.backgroundColor = 'green';
}
// 鼠标放上高亮显示
lists[i].onmouseover = function () {
bg = this.style.backgroundColor;
// 鼠标放到li 上高亮显示
this.style.backgroundColor = 'yellow';
}
lists[i].onmouseout = function () {
// 鼠标离开li 还原成原来的颜色
this.style.backgroundColor = bg;
}
}
</script>
</body>
</html>
隔行换色,鼠标经过显示颜色
最新推荐文章于 2024-07-18 10:24:18 发布