给你的博客网站侧边栏添加一个旗下网站栏目源码

给你的博客网站侧边栏添加一个旗下网站栏目源码

鼠标经过有浮动效果

演示

源码

html部分

[lv]

<div class="textwidget custom-html-widget" style=" padding: 10px 10px 10px; ">
    <div class="textwidget">
        <div class="attentionus">
            <span class="zhan-widget-link zhan-link-z1">
                <span class="zhan-widget-link-count">
                    大刚网络dg3.top
                </span>
                <a href="https://dg3.top/" target="_blank" rel="noopener">
                    <span class="zhan-widget-link-title">
                        大刚网络
                    </span>
                </a>
            </span>
            <br>
            <span class="zhan-widget-link zhan-link-z2">
                <span class="zhan-widget-link-count">
                    大刚资源库dgzyku.com
                </span>
                <a href="https://dg3.top/" target="_blank" rel="noopener">
                    <span class="zhan-widget-link-title">
                        大刚网络
                    </span>
                </a>
            </span>
            <br>
            <span class="zhan-widget-link zhan-link-z3">
                <span class="zhan-widget-link-count">
                    QQ资源吧qqzy8.com
                </span>
                <a href="https://dg3.top/" target="_blank" rel="noopener">
                    <span class="zhan-widget-link-title">
                        大刚网络
                    </span>
                </a>
            </span>
            <br>
            <span class="zhan-widget-link zhan-link-z4">
                <span class="zhan-widget-link-count">
                    QQ资源吧qqzy8.com
                </span>
                <a href="https://dg3.top/" target="_blank" rel="noopener">
                    <span class="zhan-widget-link-title">
                        大刚网络
                    </span>
                </a>
            </span>
            <br>
            <span class="zhan-widget-link zhan-link-z5">
                <span class="zhan-widget-link-count">
                    钻石资源网52b8.com
                </span>
                <a href="https://dg3.top/" target="_blank" rel="noopener">
                    <span class="zhan-widget-link-title">
                        大刚网络
                    </span>
                </a>
            </span>
        </div>
        </div>
        </div>

[/lv]

css部分

[lv]

.zhan-widget-link {
    position:relative;
    margin-bottom:-10px !important;
    position:relative;
    display:block;
    font-size:13px;
    background:#fff;
    color:#525252;
    line-height:40px;
    margin-left:-10px;
    padding:0 

14px;
    border:1px solid #DDD;
    border-radius:2px;
    width:auto
}
span.zhan-widget-link.zhan-link-z1 {
    margin-top:-10px;
}
.zhan-widget-link-count i {
    margin-right:9px;
    font-size:17px;
    vertical-align:middle
}
.zhan-widget-link-title {
    position:absolute;
    top:-1px;
    right:-14px !important;
    bottom:-1px;
    width:100px;
    text-align:center;
    background:rgba(255,255,255,.08);
    transition:width .3s;
    border-radius:0 3px 3px 0
}
.zhan-widget-link:hover .zhan-widget-link-title {
    width:116px
}
.zhan-widget-link a {
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0
}
.zhan-link-z1 {
    border-color:rgba(236,61,81,.39)
}
.zhan-link-z1 i {
    color:#FFF;
    margin-right:3px
}
.zhan-link-z1 .zhan-widget-link-title {
    background-color:#ec3d51;
    color:#fff
}
.zhan-link-z2 {
    border-color:rgba(18,170,232,.39)
}
.zhan-link-z2 i {
    color:#FFF;
    margin-right:3px
}
.zhan-link-z2 .zhan-widget-link-title {
    background-color:#12aae8;
    color:#fff
}
.zhan-link-z3 {
    border-color:rgba(221,7,208,.39)
}
.zhan-link-z3 i {
    color:#FFF;
    margin-right:3px
}
.zhan-link-z3 .zhan-widget-link-title {
    background-color:#dd07d0;
    color:#fff
}
.zhan-link-z4 {
    border-color:rgba(249,82,16,.39)
}
.zhan-link-z4 i {
    color:#FFF;
    margin-right:3px
}
.zhan-link-z4 .zhan-widget-link-title {
    background-color:#f95210;
    color:#fff
}
.zhan-link-z5 {
    border-color:rgba(25,152,114,.39)
}
.zhan-link-z5 i {
    color:#FFF;
    margin-right:3px
}
.zhan-link-z5 .zhan-widget-link-title {
    background-color:#199872;
    color:#fff
}

[/lv]