给你的博客网站侧边栏添加一个旗下网站栏目源码
给你的博客网站侧边栏添加一个旗下网站栏目源码
鼠标经过有浮动效果
演示
源码
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]

