<!doctype html><html lang="en"> <head> ?<meta charset="UTF-8"> ?<meta name="Generator" content="EditPlus?"> ?<meta name="Author" content=""> ?<meta name="Keywords" content=""> ?<meta name="Description" content=""> ?<title>first page</title> </head> <style>html,body{height:100%;overflow:hidden;}#warp,ul{margin:0;padding:0;}body{background:#368 ?no-repeat top/cover;}ul{list-style:none;}#wrap{ position:relation; width:1158px; height:452px; margin:50px auto;// border:1px solid #222; border-top:1px solid #222; border-left:1px solid #222;// border-right:1px solid #222;// border-bottom:1px solid #222;}#wrap ul li{z-index:999;position:relative;float:left;width:230px;height:150px;border-right:1px solid #222;border-bottom:1px solid #222;background:url(‘images/client.png‘);transition:1s;/*css3*/}#mb{position:absolute;width:230px;height:150px;background:rgba(0,0,0,.2);transition:1s;} </style> <body><div id=‘wrap‘><ul><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul><div id=‘mb‘></div></div><script>var aLi = document.querySelectorAll(‘#wrap ul li‘);/*h5的api*/var oMb = document.querySelector(‘#mb‘);var length=aLi.length;for(var i=0;i<length;i++){aLi[i].style.backgroundPositionX = i*(-230)+‘px‘;aLi[i].onmouseenter = function(){this.style.backgroundPositionY = -150+‘px‘;var _top = this.offsetTop;var _left = this.offsetLeft;//console.log(_top , _left);oMb.style.top = _top + ‘px‘;oMb.style.left = ?_left + ‘px‘;}aLi[i].onmouseleave = function(){this.style.backgroundPositionY = ‘0px‘;}}</script> </body></html>
web前端－鼠标响应事件
原文地址：http://www.cnblogs.com/peicen/p/7653125.html