悬停小组件-反馈和返回顶部
一个返回顶部的小组件，悬挂在页面右下角，以图标显示，当鼠标悬停在图标上时显示文字。
正常显示状态
鼠标悬停状态
实现的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 }
