點亮盒子.jpg
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
button {
margin: 10px;
width: 100px;
height: 40px;
cursor: pointer;
}
.current {
background-color: yellow;
}
</style>
</head>
<body>
<button>按鈕1</button>
<button>按鈕2</button>
<button>按鈕3</button>
<button>按鈕4</button>
<button>按鈕5</button>
<script>
//需求：鼠標放到哪個button上，改button變成黃色背景（添加類）
//步驟：
//1.獲取事件源
//2.綁定事件
//3.書寫事件驅動程序
//1.獲取事件源
var btnArr = document.getElementsByTagName("button");
//2.綁定事件
for(var i=0;i<btnArr.length;i++){
btnArr[i].onmouseover = function () {
//排他思想（干掉所有人，剩下我一個）
//排他思想是和for循環連用
for(var j=0;j<btnArr.length;j++){
btnArr[j].className = "";
}
this.className = "current";
}
}
//3.書寫事件驅動程序
</script>
</body>
</html>
