点击分享出现侧框，移开鼠标，侧框消失

<!DOCTYPE html>
<html>
<head>
    <title>分享</title>
    <style type="text/css">
    *{
        margin: 0;
        position: 0;
    }
    .big{
        width: 400px;
        height: 300px;
        overflow: hidden;
    }
    #share{
        width: 25px;
        height: 45px;
        background-color:#ccc;
        margin-top: 70px;
    }

    #box{
        width: 100px;
        height: 200px;
        background-color: pink;
        display: none;
        float: left;
    }
    
    </style>
</head>
<body>
<div class="big">
    <div id="box" onmouseout="noshare()">
        <!-- <ul>
            <li><a href="">微信</a></li>
            <li><a href="">QQ</a></li>
            <li><a href="">朋友圈</a></li>
            <li><a href="">微博</a></li>
            <li><a href="">微信</a></li>
            <li><a href="">QQ</a></li>
            <li><a href="">朋友圈</a></li>
            <li><a href="">微博</a></li>
        </ul> -->
    </div>
    <div id="share" onclick="share()" >分享</div>
</div>
</body>
<script type="text/javascript">
    
function share(){
    var box=document.getElementById('box');
    var share=document.getElementById('share')    
    box.style.display= 'block';
    share.style.marginLeft="100px";

}
function noshare(){
    var box=document.getElementById('box');
    var share=document.getElementById('share');
    share.style.marginLeft="0px";
    box.style.display= 'none';
}
</script>
</html>

未成功部分，当注释的部分取消时，demo失败，问题盒子中的东西，不属于盒子？

<!DOCTYPE html>
<html>
<head>
   <title>分享</title>
   <style type="text/css">
   *{
       margin: 0;
       position: 0;
   }
   .big{
       width: 400px;
       height: 300px;
       overflow: hidden;
   }
   #share{
       width: 25px;
       height: 45px;
       background-color:#ccc;
       margin-top: 70px;
   }

   #box{
       width: 100px;
       height: 200px;
       background-color: pink;
       display: none;
       float: left;
   }

   </style>
</head>
<body>
<div class="big">
   <div id="box" onmouseout="noshare()">
       
   </div>
   <div id="share" onclick="share()" >分享</div>
</div>
</body>
<script type="text/javascript">

function share(){
   var box=document.getElementById('box');
   var share=document.getElementById('share')
   box.style.display= 'block';
   share.style.marginLeft="100px";

}
function noshare(){
   var box=document.getElementById('box');
   var share=document.getElementById('share');
   share.style.marginLeft="0px";
   box.style.display= 'none';
}
</script>
</html>

发表于 2016-08-09 14:56 螺精小姐姐阅读(259) 评论(0) 收藏举报

刷新页面返回顶部

点击分享出现侧框，移开鼠标，侧框消失

公告

导航