                        課程
                    
                        /前端開發(fā)
                        
                            /JavaScript
                        
                        /側(cè)欄工具條開發(fā)

最后一步代碼在CSS中怎么顯示的，即有hover，又有after的那一步

最后一步代碼在CSS中是怎么顯示的，誰有，發(fā)一下

12:43

今曦3201410

2016-06-28

源自：側(cè)欄工具條開發(fā) 4-3

關(guān)注問題我要回答

1272

操作

收起

1 回答

小北呦
2016-07-13

.toolbar-item{
????position:?relative;
????display:?block;
????width:?$toolbar-size;
????height:?$toolbar-size;
????margin-top:?1px;
????
????
????&:hover{
????????.toolbar-btn{
????????????&:before{
????????????????top:-$toolbar-size;
????????????}
????????????&:after{
????????????????top:0;
????????????}
????????}
????????&:after{
????????????@include?opacity(1);
????????????@include?scale(1);
????????}
????????
????}
????
????&:after{
????????content:?"";
????????position:?absolute;
????????right:?$toolbar-size?-?6;
????????bottom:?-10px;
????????width:?172px;
????????background-image:?url(../img/toolbar_img.png);
????????background-repeat:?no-repeat;
????????@include?opacity(0);
????????@include?transform-origin(95%?95%);
????????@include?scale(0.01);
????????@include?transition(all?1s);
????}
}