<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<style>
* {
margin: 0;
padding: 0;
}
ul {
width: 400px;
position: relative;
margin: 100px auto;
}
li {
width: 100px;
height: 100px;
background: red;
margin: 10px;
float: left;
list-style: none;
z-index: 1
}
</style>
<script>
window.onload = function() {
var oUl = document.getElementById("test");
var oLi = oUl.getElementsByTagName('li');
var curZIndex = 2;
for (var i = 0; i < oLi.length; i++) {
oLi[i].style.left = oLi[i].offsetLeft + "px";
oLi[i].style.top = oLi[i].offsetTop + "px";
}
for (var i = 0; i < oLi.length; i++) {
oLi[i].style.position = "absolute";
oLi[i].style.margin = 0
oLi[i].onmouseover = function() {
this.style.zIndex = curZIndex++;
this.style.width = 150 + "px";
this.style.height = 150 + "px";
this.style.marginLeft = -25 + "px";
this.style.marginTop = -25 + "px";
this.style.backgroundColor = "blue";
}
oLi[i].onmouseout = function() {
this.style.width = 100 + "px";
this.style.height = 100 + "px";
this.style.marginLeft = 0 + "px";
this.style.marginTop = 0 + "px";
this.style.backgroundColor = "red";
}
}
}
</script>
</head>
<body>
<ul id="test">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>
