网页上鼠标放到上面从边缘弹出的效果怎么做到的

Question

鼠标放上去之前

放上去之后

Answer 1

hover设置width就行了。。你要动画可以加上css3

 <style>
    #float{right:0;width:30px;height:100px;top:100px;overflow:hidden;position:fixed;-moz-transition:width 0.6s linear;-webkit-transition:width 0.6s linear;transition:width 0.6s linear;}
    #float div.container{width:10000px;}
    #float div.container div{float:left;height:100%}
    #float div.container div.head{width:30px;background:#eee;line-height:50px;text-align:center}
    #float div.container div.content{width:300px;background:#ccc}
    #float:hover{width:330px}
</style>
<div id="float">
    <div class="container">
        <div class="head">分<br />享</div>
        <div class="content">内容</div>
    </div>
</div>