<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style> #div1{ height:200px; 100px; background:red; position:absolute; left:-100px; top:100px; } #div2{ height:60px; 30px; background:#000; position:absolute; right:-30px; top:70px; color:#FFF; text-align:center; line-height:30px; } </style> <script type="text/javascript"> window.onload = function () { var odiv = document.getElementById('div1'); odiv.onmouseover = function () { odiv.style.left = '0px'; }; odiv.onmouseout = function () { odiv.style.left = '-100px'; } }; </script> </head> <body> <div id="div1"> <div id="div2">分享</div> </div> </body> </html>