<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box>div{
width: 200px;
height: 200px;
float: left;
border:1px solid;
}
.active{
background: blueviolet;
}
.clear_fix:after{
content: '';
display: block;
clear: both;
}
.on{
background: blueviolet;
}
</style>
</head>
<body>
<div id='box' class='clear_fix'>
<div id='show' class='active on'>111</div>
<div>222</div>
<div>333</div>
<div>4444</div>
</div>
</body>
<script>
var box = document.getElementById('box')
var divs = document.getElementsByTagName('div')
var show = document.getElementById('show')
for(var i=0;i<divs.length;i++){
divs[i].onmouseover= function(){
this.className = 'active'
}
divs[i].onmouseout = function(){
this.className = ''
}
}
</script>
</html>
A荒城