<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
#div1{
height:200px;
width:100px;
background:red;
position:absolute;
left:-100px;
top:100px;
}
#div2{
height:60px;
width: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>