<style>

.right_fix {
  position: fixed;
  right: 1%;
  top: 35%;
  z-index: 99;
}
.right_fix .text {}
.right_fix .text li {
  position: relative;
  width: 98px;
  background: rgba(0,0,0,.3);
  border-top: 1px solid #eee;
  border-radius: 10px;
  margin-top: 5px;
}
.right_fix .text li:first-child {
  border: none;
}
.right_fix .text li .pic {
  width: 100%;
  padding: 8px 0;
}
.right_fix .text li .pic img {
  height: 30px;
  display: block;
  width: auto;
  margin: 0 auto;
}
.right_fix .text li .pic .img1 {
  display: block;
}
.right_fix .text li .pic .img2 {
  display: none;
}
.right_fix .text li .pic span {
  font-size: 14px;
  color: #fff;
  display: block;
  text-align: center;
  margin-top: 8px;
}
.right_fix .text li .text {
  background: #fff;
  padding: 8px;
  position: absolute;
  left: -150px;
  top: 0;
  width: 150px;
  display: none;
}
.right_fix .text li .text img {
  max-width: 100%;
  display: block;
  margin: 0 auto;
}
.right_fix .text li .text1 {
  height: 73px;
  position: absolute;
  left: -220px;
  top: 7px;
  width: 220px;
  display: none;
}
.right_fix .text li .text1 .search {
  position: relative;
  background: #990000;
  padding: 8px;
}
.right_fix .text li .text1 .inp1 {
  width: 100%;
  background: #fff;
  height: 42px;
  border: none;
  outline: 0;
  padding-left: 5px;
}
.right_fix .text li .text1 .btn_sub {
  position: absolute;
  right: 8px;
  top: 8px;
  width: 40px;
  height: 42px;
  background: url('/images/seah.png') no-repeat center #fff;
  background-size: 16px;
  border: none;
  outline: 0;
}

.right_fix .text li:hover {
  background: #990000;
  cursor: pointer;
}
.right_fix .text li:hover .pic .img1 {
  display: none;
}
.right_fix .text li:hover .pic .img2 {
  display: block;
}
.right_fix .text li:hover .text {
  display: block;
}
.right_fix .text li:hover .text1 {
  display: block;
}
</style>





 <div class="right_fix">
        <div class="text clearfix">
            <ul>
                <li>
                    <div class="pic">
                        <img class="img1" src="/images/fix1.png">
                        <img class="img2" src="/images/fix1.png">
                        <span>产品搜索</span>
                    </div>
                    <div class="text1">
                        <div class="search clearfix">
                            <form  action="/search/" method="post">
                                <input class="inp1" type="text" name="key" placeholder="请输入产品名称">
                                <input class="btn_sub" type="submit" name="" value="">
                            </form>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="pic">
                        <a target="blank" href="http://wpa.qq.com/msgrd?v=3&amp;uin=25864107&amp;site=qq&amp;menu=yes">
                            <img class="img1" src="/images/fix2.png">
                            <img class="img2" src="/images/fix2.png">
                            <span>在线咨询</span>
                        </a>
                    </div>
                </li>
                <li>
                    <div class="pic">
                        <img class="img1" src="/images/fix3.png">
                        <img class="img2" src="/images/fix3.png">
                        <span>二维码</span>
                    </div>
                    <div class="text">
                        <img src="/images/631f393455623b35cd9a8046c1eb0f55.jpg" />                    </div>
                </li>
                <li class="btntop">
                    <div class="pic">
                        <img class="img1" src="/images/fix4.png">
                        <img class="img2" src="/images/fix4.png">
                        <span>返回顶部</span>
                    </div>
                </li>
                <script type="text/javascript">
                    $('.btntop').click(function(){
                        $('body,html').animate({ scrollTop: 0 },500);
                    })
                </script>
            </ul>
        </div>
    </div>

下载

转载请注明：css样式» 自适应右侧客服带二维码QQ客服