<div class="tab"> 嘿!八本那年~ <div class="tab-class-fir"></div> <div class="tab-class-sec"></div> </div>
.tab{ display: inline-block; padding: 0 15px; line-height: 35px; cursor: pointer; transition: all 0.23s; position: relative; } .tab:before, .tab:after, .tab-class-fir, .tab-class-sec { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; box-sizing: border-box; transition: all 0.23s; } .tab:hover { color: #fff; background-color: #a29bfe; } .tab:before { border-top: 1px solid #000; } .tab:after { border-bottom: 1px solid #000; } .tab-class-fir { border-left: 1px solid #000; } .tab-class-sec { border-right: 1px solid #000; } .tab:hover:before { width: calc(100% + 10px); left: -10px; /* left: -5px; */ } .tab:hover:after { width: calc(100% + 10px); left: 0; /* left: -5px; */ } .tab:hover > .tab-class-fir { height: calc(100% + 10px); top: 0; /* top: -5px; */ } .tab:hover > .tab-class-sec { height: calc(100% + 10px); top: -10px; /* top: -5px; */ }
上方css代码有四句hover,把他们的top或left更换成注释掉的那句试试看?