鼠标划入一块区域高度增长弹出，划出时高度减小消失；

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接： https://blog.csdn.net/MingL520/article/details/53505484

css部分：

把区域固定在右下角

        <style>
            .contact_suspension_frame {
                right: 0;
                z-index: 15;
                position: fixed;
                bottom: 0;
            }
            .suspension_frame_box {
                border: 1px solid #4da1e1;
                background: #fafafa;
                width: 175px;
                position: relative;
            }
            .suspension_frame_box h2 {
                height: 34px;
                line-height: 34px;
                padding: 0 3px;
                font-size: 14px;
                color: #fff;
                background: #3399FE;
                margin: 1px;
            }
            .suspension_frame_box h2 b {
                display: inline-block;
                width: 21px;
                height: 22px;
                vertical-align: middle;
                margin-top: 1px;
                background: url(images/icon/icon_sprites.png) no-repeat 0 -880px;
            }
            .suspension_frame_box h2 span {
                vertical-align: middle;
                display: inline-block;
                margin-top: -1px;
                height: 34px;
            }
            .suspension_frame_box table {
                margin: 0 0 20px 14px;
                text-align: left;
                width: 144px;
                font-size: 12px;
            }
            .suspension_frame_box table tr th {
                padding: 5px 0;
                color: #999;
                font-weight: normal;
            }
            .suspension_frame_box table tr td {
                color: #666;
            }
        </style>

HTML部分：

<div class="contact_suspension_frame">
            <div class="suspension_frame_box" id="suspensionFrame">
                <h2><b></b>&nbsp;<span>立即咨询价格和流程</span></h2>
                <div id="contactContent" class="contactContent" style="display: none; height: 0px; overflow: hidden;">
                    <table>
                        <tbody><tr>
                            <th valign="middle"><img src="resources/images/icon/suspension_frame_icon03_v2.jpg" alt="电话"></th>
                            <td>888-888-888</td>
                        </tr>
                        <tr>
                            <th valign="middle"><img src="resources/images/icon/suspension_frame_icon02_v2.jpg" alt="QQ"></th>
                            <td>88888888</td>
                        </tr>
                        <tr>
                            <th valign="middle"><img src="resources/images/icon/suspension_frame_icon01_v2.jpg" alt="微信"></th>
                            <td><img src="resources/images/two_dimensional_code.jpg" alt="二维码"></td>
                        </tr>
                        <tr>
                            <th></th>
                            <td>
                                <a target="_blank" href="javascript:;">
                                    <img src="http://wpa.qq.com/pa?p=2:800002255:41" alt="点击这里给我发消息" title="点击这里给我发消息">
                                </a>
                            </td>
                        </tr>
                    </tbody></table>
                </div>
            </div>
        </div>

js部分：

<script>
        $(".contact_suspension_frame").hover(function(){
            $("#contactContent").show();
            $("#contactContent").stop().animate({height:"195px"},"normal",function(){
                
            });
        },function(){
            $("#contactContent").stop().animate({height:"0px"},"normal",function () {
            $("#contactContent").hide();
            });
        });
    </script>