• 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 6 months ago (05-28) 425 views 0 comments

The effect is shown in the figure

 < div class = "tab" > 
; hey! Eight year ~ 
 < 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
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