简单的鼠标悬浮侧边栏效果

前台代码

      <div >
               <button class="btn btn-lg btn-icon btn-info" ng-click="showSaveTag()" ng-disabled="!isShowSaveBtn"style="margin-bottom:2px;"><i id="3" class="glyphicon glyphicon-ok"></i></button>

               <button class="btn btn-lg btn-icon btn-info" style="margin-bottom:2px;z-index:999999;position:relative" ng-mouseover="mouseover($event)" ng-mouseleave="mouseout($event)" id="1" ng-click="ShowTagManage()"><i class="glyphicon glyphicon-tasks" id="1"></i></button>

               <button class="btn btn-lg btn-icon btn-info" style="margin-bottom:2px;z-index:999999;position:relative" ng-mouseover="mouseover($event)" ng-mouseleave="mouseout($event)" id="2" ng-click="showSavedTagList()"><i id="2" class="fa fa-list-ul"></i></button>

               <button class="btn btn-lg btn-icon btn-info" style="margin-bottom:2px;z-index:999999;position:relative" ng-mouseover="mouseover($event)" ng-mouseleave="mouseout($event)" id="3" ng-click="showSavedOldData()"><i id="3" class="fa fa-table"></i></button>

               <div style="background-color:#23b7e5;position:absolute;top:62px;height:45px;width:45px;z-index:90;color:white;text-align:center;font-size:15px;padding-top:10px;font-weight:bold;border-radius:3px;" id="111" >标签计算方式</div>
               <div style="background-color:#23b7e5;position:absolute;top:109px;height:45px;width:45px;z-index:90;color:white;text-align:center;font-size:15px;padding-top:10px;font-weight:bold;border-radius:3px;" id="222" >已保存标签</div>
               <div style="background-color:#23b7e5;position:absolute;top:156px;height:45px;width:45px;z-index:90;color:white;text-align:center;font-size:15px;padding-top:10px;font-weight:bold;border-radius:3px;" id="333" >历史数据</div>
           </div>

悬浮事件

    $scope.mouseover = function (event)    {        var id = event.target.id;        switch (id) {            case "1":
                $("#111").stop().animate({                    width: "120px",                    right: "30px"
                });                break;            case "2":
                $("#222").stop().animate({                    width: "120px",                    right: "30px"
                });                break;            case "3":
                $("#333").stop().animate({                    width: "120px",                    right: "30px"
                });                break;
        }
    }
    $scope.mouseout = function (event)    {        var id = event.target.id;        switch (id) {            case "1":
                $("#111").animate({                    width: "30px",                    right: "0px"
                });                break;            case "2":
                $("#222").animate({                    width: "30px",                    right: "0px"
                });                break;            case "3":
                $("#333").animate({                    width: "30px",                    right: "0px"
                });                break;
        }
    }

作者：三只仓鼠
链接：https://www.jianshu.com/p/5f0a390da233