content url生成的镂空背景没有色块同时实现transition过渡效果实例页面

展示

代码

CSS代码：

.type {
    max-width: 1000px; min-width: 600px;
    margin: 60px auto;
    font-size: 16px;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
}
.type_li {
    width: 25%;
    color: #666;
    float: left;
    transition: color .25s;
}
.type_li:hover {
    color: #000;
    text-decoration: none;
}
.type_li.selected {
    color: #00a5e0;
}
.icon_type {
    display: inline-block;
    height: 140px;    
    background-color: #c8c8c8;
    transition: background-color .25s;
    overflow: hidden;
}
.icon_type:after {
    position: relative;
    content: url(icons-verify-type.png);
}
.icon_type_2:after {
    top: -140px;
}
.icon_type_3:after {
    top: -280px;
}
.icon_type_4:after {
    top: -420px;
}
a:hover .icon_type {
    background-color: #666;
}
a.selected .icon_type {
    background-color: #00a5e0;
}
            

HTML代码：

<div id="type" class="type">
    <a href="javascript:" class="type_li">
        <i class="icon_type icon_type_1"></i>
        <h6>企业</h6>
    </a>
    <a href="javascript:" class="type_li">
        <i class="icon_type icon_type_2"></i>
        <h6>网店商家</h6>
    </a>
    <a href="javascript:" class="type_li">
        <i class="icon_type icon_type_3"></i>
        <h6>媒体</h6>
    </a>
    <a href="javascript:" class="type_li">
        <i class="icon_type icon_type_4"></i>
        <h6>其他组织</h6>
    </a>
</div>
            

JS代码：

if (document.querySelector) {
    var elTypeAs = document.querySelectorAll('#type a');
    for(var startA=0; startA<elTypeAs.length; startA+=1) {
        elTypeAs[startA].onclick = function() {
            var eleSelected = document.querySelector('#type .selected');
            if (eleSelected) eleSelected.className = 'type_li';
            this.className = 'type_li selected';
            return false;
        };
    }
}