css样式表格边框1px hover时为2px 实现方式

//css
.flclass-cont .flclass-cont-box{width:100%;display:inline-block;font-size:0;margin:10px;position:relative;width:100%;padding-right:110px}
.flclass-cont .flclass-cont-box span{display:inline-block;position:relative;font-size:12px;width:98px;height:48px;line-height:48px;position:relative;text-align:center;cursor:pointer}
.flclass-cont .flclass-cont-box span > i{display:inline-block;position:absolute;left:0;top:0;width:100%;height:100%;border:1px solid #dcdcdc;border-right:transparent}
.flclass-cont .flclass-cont-box span:last-child{border-right:1px solid #dcdcdc}
.flclass-cont .flclass-cont-box span:hover i{border:2px solid #d71f1b}

//html
 <div class="flclass-cont-box">
    <span v-for="item in 7">    40升以下 <i></i> </span>                                                                            
</div>

//预览

 

转载于:https://www.cnblogs.com/zhujiasheng/p/8477873.html