悬停小组件-反馈和返回顶部

一个返回顶部的小组件，悬挂在页面右下角，以图标显示，当鼠标悬停在图标上时显示文字。

正常显示状态

鼠标悬停状态

       

 

实现的html和js代码：

 1 <ul class="fixed-bar">
 2     <li class="feedback">
 3         <a class="fixed-bar-icon"><i class="glyphicon glyphicon-question-sign hz-icon"></i></a>
 4         <a class="fixed-bar-text">问题反馈</a>
 5     </li>
 6     <li class="go-top">
 7         <a class="fixed-bar-icon"><i class="glyphicon glyphicon-chevron-up hz-icon"></i></a>
 8         <a href="#" class="fixed-bar-text">回到顶部</a>
 9     </li>
10 </ul>
11 
12 <script>
13     $(document).ready(function(){
14         $('ul.fixed-bar li').hover(function(){
15             $(this).children(':eq(0)').hide();
16             $(this).css('background-color', '#f4645f').children(':eq(1)').show().css('display', 'block');
17         }, function () {
18             $(this).children(':eq(1)').hide();
19             $(this).css('background-color', '#fff').children(':eq(0)').show().css('display', 'block');
20         });
21     });
22 </script>

 

CSS代码：

 1 .fixed-bar {
 2     position: fixed;
 3     right: 1%;
 4     bottom: 1%;
 5     z-index: 10000;
 6     margin: 0;
 7     padding: 0;
 8 }
 9 .fixed-bar li{
10     margin: 0;
11     padding: 0;
12     height: 52px;
13     width: 50px;
14     background-color: white;
15     border: 1px solid #dddddd;
16     list-style: none;
17     transition: all 0.5s ease 0s;
18 }
19 .fixed-bar li:hover{
20     border-color:#f4645f;
21     cursor: pointer;
22 }
23 .fixed-bar li.go-top{
24     margin-top: -1px;
25 }
26 .fixed-bar li.go-top a:hover,a:active, a:focus, a:visited{
27     text-decoration: none;
28     outline: none;
29 }
30 .fixed-bar li .hz-icon{
31     width: 100%;
32     height: 100%;
33     line-height: 50px;
34     text-align: center;
35     display: block;
36     color: #999;
37     font-size: 25px;
38 }
39 .fixed-bar .fixed-bar-text{
40     line-height: 1.2em;
41     display: none;
42     color: #fff;
43     padding: 7px 10px;
44     font-size: 14px;
45 }

 

转载于:https://www.cnblogs.com/eryidianer/p/4936505.html