中英2栏目列表

直接使用代码

图片素材

无

css代码

 <style>
    .com-arctype-item{border:1px solid #aaa;border-left:8px solid #306aff;height:100px;padding:15px;margin-top:20px;position:relative}
    .com-arctype-item h4{font-size:16px;line-height:20px}
    .com-arctype-item .tanchuang{position:absolute;top:100px;left:-8px;width:500px;z-index:9999;background:#fff;display:none}
    .com-arctype-item .tanchuang .t-content{border:1px solid #096;border-left:8px solid #096;height:200px;padding:15px}
    .com-arctype-item .after{width:0;height:0;border-width:0 12px 12px 12px;border-style:solid;border-color:#096 transparent;margin-left:30px}
    .com-arctype-item .tanchuang a{display:inline-block;width:48%;line-height:25px}
    .com-arctype-item .tanchuang a:hover{color:#2c82c9}
    .c-list:nth-child(6n+0) .tanchuang,.c-list:nth-child(6n-1) .tanchuang{left:-342px}
    .c-list:nth-child(6n+0) .tanchuang .after,.c-list:nth-child(6n-1) .tanchuang .after{margin-left:390px}
    .item1{border-left:8px solid #306aff}
    .item1 .tanchuang .t-content{border:1px solid #306aff;border-left:8px solid #306aff}
    .item1 .tanchuang .after{border-color:#306aff transparent}
    .item2{border-left:8px solid #fba026}
    .item2 .tanchuang .t-content{border:1px solid #fba026;border-left:8px solid #fba026}
    .item2 .tanchuang .after{border-color:#fba026 transparent}
    .item3{border-left:8px solid #9365b8}
    .item3 .tanchuang .t-content{border:1px solid #9365b8;border-left:8px solid #9365b8}
    .item3 .tanchuang .after{border-color:#9365b8 transparent}
    .item4{border-left:8px solid #e14938}
    .item4 .tanchuang .t-content{border:1px solid #e14938;border-left:8px solid #e14938}
    .item4 .tanchuang .after{border-color:#e14938 transparent}
    .item5{border-left:8px solid #553982}
    .item5 .tanchuang .t-content{border:1px solid #553982;border-left:8px solid #553982}
    .item5 .tanchuang .after{border-color:#553982 transparent}
    .item6{border-left:8px solid #2c82c9}
    .item6 .tanchuang .t-content{border:1px solid #2c82c9;border-left:8px solid #2c82c9}
    .item6 .tanchuang .after{border-color:#2c82c9 transparent}
    .item7{border-left:8px solid #1abc9c}
    .item7 .tanchuang .t-content{border:1px solid #1abc9c;border-left:8px solid #1abc9c}
    .item7 .tanchuang .after{border-color:#1abc9c transparent}
    .item8{border-left:8px solid #a38f84}
    .item8 .tanchuang .t-content{border:1px solid #a38f84;border-left:8px solid #a38f84}
    .item8 .tanchuang .after{border-color:#a38f84 transparent}
    .item9{border-left:8px solid #fba026}
    .item9 .tanchuang .t-content{border:1px solid #fba026;border-left:8px solid #fba026}
    .item9 .tanchuang .after{border-color:#fba026 transparent}
    .item10{border-left:8px solid #9365b8}
    .item10 .tanchuang .t-content{border:1px solid #9365b8;border-left:8px solid #9365b8}
    .item10 .tanchuang .after{border-color:#9365b8 transparent}
    .item11{border-left:8px solid #e14938}
    .item11 .tanchuang .t-content{border:1px solid #e14938;border-left:8px solid #e14938}
    .item11 .tanchuang .after{border-color:#e14938 transparent}
    .item12{border-left:8px solid #553982}
    .item12 .tanchuang .t-content{border:1px solid #553982;border-left:8px solid #553982}
    .item12 .tanchuang .after{border-color:#553982 transparent}
    .item13{border-left:8px solid #2c82c9}
    .item13 .tanchuang .t-content{border:1px solid #2c82c9;border-left:8px solid #2c82c9}
    .item13 .tanchuang .after{border-color:#2c82c9 transparent}
    .item14{border-left:8px solid #1abc9c}
    .item14 .tanchuang .t-content{border:1px solid #1abc9c;border-left:8px solid #1abc9c}
    .item14 .tanchuang .after{border-color:#1abc9c transparent}
    .item15{border-left:8px solid #a38f84}
    .item15 .tanchuang .t-content{border:1px solid #a38f84;border-left:8px solid #a38f84}
    .item15 .tanchuang .after{border-color:#a38f84 transparent}
</style>

HTML+JS代码

 <div class="container">
    <h2 class="arctype-one">产品</h2>
    <p>
        Semiware 理解您在不同领域的产品或电路设计中都会有着特定的需求,为确保使这些需求得到满足，我们开发了完整的产品线或产品组合。
        因此，无论您希望将自己的技术或产品应用到什么环境，赛米微尔的产品研发人员或应用工程师都能为您提供优质的产品和优秀的应用解决方案。这就是在过去的多年来，越来越多的企业纷纷依赖于赛米微尔来解决其电路设计需求的原因。
        <br><br>
        根据您的行业，选择适合您的产品线...
    </p>
</div>
<!-- 产品组 -->
<div class="container">
    <div class="row mar-top30" >
        <div class="col-md-2 c-list">
            <div class="com-arctype-item item1">
                <a href="">
                    <h4>瞬态电压抑制器(TVS) ( 3346 ) </h4>
                </a>
                <div class="tanchuang">
                    <div class="after"></div>
                    <div class="t-content">
                        <a href="">● 保护直流和交流线路的TVS管</a>
                        <a href="">● 引线式瞬态抑制二极管</a>
                        <a href="">● 表面贴装型瞬态抑制二极管</a>
                        <a  href="">● 汽车用瞬态抑制二极管</a>
                        <a href="">● 高可靠性系列瞬态抑制二极管</a>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-2 c-list">
            <div class="com-arctype-item item2">
                <a href="">
                    <h4>单路和多路静电保护(ESD) ( 230 ) </h4>
                </a>
                <div class="tanchuang">
                    <div class="after"></div>
                    <div class="t-content">
                        <a href="">● 保护直流和交流线路的TVS管</a>
                        <a href="">● 引线式瞬态抑制二极管</a>
                        <a href="">● 表面贴装型瞬态抑制二极管</a>
                        <a  href="">● 汽车用瞬态抑制二极管</a>
                        <a href="">● 高可靠性系列瞬态抑制二极管</a>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-2 c-list">
            <div class="com-arctype-item item3">
                <a href="">
                    <h4>陶瓷气体放电管(GDT) ( 117 ) </h4>
                </a>
                <div class="tanchuang">
                    <div class="after"></div>
                    <div class="t-content">
                        <a href="">● 保护直流和交流线路的TVS管</a>
                        <a href="">● 引线式瞬态抑制二极管</a>
                        <a href="">● 表面贴装型瞬态抑制二极管</a>
                        <a  href="">● 汽车用瞬态抑制二极管</a>
                        <a href="">● 高可靠性系列瞬态抑制二极管</a>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-2 c-list">
            <div class="com-arctype-item item4">
                <a href="">
                    <h4>半导体放电管(TISP) ( 109 ) </h4>
                </a>
            </div>
        </div>
        <div class="col-md-2 c-list">
            <div class="com-arctype-item item5">
                <a href="">
                    <h4>可控硅和双向可控硅(SCR) ( 553 ) </h4>
                </a>
                <div class="tanchuang">
                    <div class="after"></div>
                    <div class="t-content"></div>
                </div>
            </div>
        </div>
        <div class="col-md-2 c-list">
            <div class="com-arctype-item item6">
                <a href="">
                    <h4>二极管和整流器(Diodes) ( 328 ) </h4>
                </a>
                <div class="tanchuang">
                    <div class="after"></div>
                    <div class="t-content"></div>
                </div>
            </div>
        </div>
        <div class="col-md-2 c-list">
            <div class="com-arctype-item item7">
                <a href="">
                    <h4>保护用压敏电阻(MOV) ( 493 ) </h4>
                </a>
                <div class="t-content"></div>
            </div>
        </div>
        <div class="col-md-2 c-list">
            <div class="com-arctype-item item8">
                <a href="">
                    <h4>自恢复保险丝(PPTC) ( 218 ) </h4>
                </a>
                <div class="t-content"></div>
            </div>
        </div>
        <div class="col-md-2 c-list">
            <div class="com-arctype-item item9">
                <a href="">
                    <h4>稳压二极管(Zener) ( 164 ) </h4>
                </a>
                <div class="t-content"></div>
            </div>
        </div>
        <div class="col-md-2 c-list">
            <div class="com-arctype-item item10">
                <a href="">
                    <h4>小信号和功率MOSFET ( 3 ) </h4>
                </a>
                <div class="t-content"></div>
            </div>
        </div>
        <div class="col-md-12 clear">
            <p class="mar-top30 line25">
            </p>
        </div>
    </div>
</div>
<script>
    
$(function(){    

    $('.com-arctype-item').hover(function(){     
    $(this).find('.tanchuang').show();
    },function(){
        $(this).find('.tanchuang').hide();
    })

})

</script>