1.两种方式绑定, this 不同的指向
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
li{ 100px; height:150px;float:left; margin-right:30px; background: #f1f1f1;position: relative; z-index: 1;}
div{ 80px; height:200px; background:red; position: absolute; top:75px;left:10px;display: none}
</style>
</head>
<body>
<ul>
<li>
<div></div>
</li>
<li>
<div></div>
</li>
<li>
<div></div>
</li>
</ul>
<script>
window.onload = function(){
var aLi = document.getElementsByTagName('li')
for(var i = 0; i < aLi.length; i++){
aLi[i].onmouseover = function(){
var _this = this;
showDiv(_this);
}
aLi[i].onmouseout = hideDiv;
}
}
function showDiv(_this){
_this.getElementsByTagName('div')[0].style.display = 'block';
}
function hideDiv(){
this.getElementsByTagName('div')[0].style.display = 'none';
}
</script>
</body>
</html>