• Welcome to the eight year blog, I'm glad to meet you at the right age!
  • Due to the theme, QQ login partners will display the default avatar in the comments. Please go to the personal center and upload the avatar again.

The CSS effect of mouse lengthening and extending around the line

Code Notes barben 2 years ago (2020-05-28) 2025 views 0 comments

The effect is shown in the figure

 <div class="tab"> well! The year of eight books~ <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; */ }

There are four hover sentences in the CSS code above. Try replacing their top or left with the comment out sentence?

Eight blogs that year, we've been there all the time
If the author does not indicate the original article, please indicate the link and source of this article
The CSS effect of mouse lengthening and extending around the line- https://www.barben.cn/code/829.html
Like it( three )
Post my comments
Cancel comment
expression Mapping Bold Strikethrough Center Italics

You need to bring your nickname and email with you in the year of eight!

  • Nickname (required)
  • Email address (required)
  • website