<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.wrap div{
width:200px;
height:100px;
background-color:purple;
border:1px solid #000;
font-size:100px;
color:#fff;
text-align:center;
line-height:100px;
}
</style>
</head>
<body>
<div class="wrap">
<div style="background:red;">1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
</div>
<script>
var divBtn = document.querySelectorAll('.wrap div');
for(var i =0;i<divBtn.length;i++){
divBtn[i].index = i;
divBtn[i].onmouseover=function(){
for(var j=0;j<divBtn.length;j++){
divBtn[j].style.background="purple";
}
divBtn[this.index].style.background = "red";
}
}
</script>
</body>
</html>
