在懸停移動元素上添加邊框並移動周圍元素

只需懸停對下面的代碼段中的'標題'，您將看到元素如何移動。爲什麼？在懸停移動元素上添加邊框並移動周圍元素

沒有餘量..而且他們只是在將邊框添加到inline-block元素時才移動。嘗試在section.twelve a像添加更多的邊框寬度：

section.twelve a { 
     border-bottom: 10px solid #FFFAFF; 
    }

但是，如果你刪除邊框一切都很好。爲什麼是這種行爲？而且它只是爲了邊界？

我只想添加任何樣式到元素而不影響其他元素。

section{ 
 
    position: relative; 
 
    height: 300px; 
 
    padding: 15px 80px; 
 
    z-index: 1; 
 
} 
 

 
section h1{ 
 
    font-size:3em; 
 
    font-weight: 100; 
 
    line-height: 1.3; 
 
    
 
} 
 

 
section a { 
 
    position: relative; 
 
    display: inline-block; 
 
    text-decoration: none; 
 
    transition: all 0.3s ease-in-out; 
 
    vertical-align: bottom; 
 
} 
 

 
section.twelve { 
 
    background: #121A5A; 
 
    color: #FFFAFF; 
 
} 
 
section.twelve a { 
 
    color:#D8315B; 
 
    font-weight: 700; 
 
    overflow: hidden; 
 
    padding: 0px 5px; 
 
    transition all 0.2s ease; 
 
    border-bottom: 5px solid #FFFAFF; 
 
} 
 

 
.twelve a:before{ 
 
    content: ""; 
 
    top:0; left: 0; 
 
    position: absolute; 
 
    width:100%; height: 100%; 
 
    background: #FFFAFF; 
 
    z-index: -1; 
 
    transition: all 0.2s ease; 
 
    transform: translateX(100%); 
 
} 
 
.twelve a:hover::before { 
 
    transform: translateX(-95%); 
 
    background: #D8315B; 
 
} 
 
.twelve a:hover{ 
 
    color: #FFFAFF; 
 
    transform: translateX(5px); 
 
    border-bottom: 1px solid #FFFAFF; 
 
}

<section class="twelve"> 
 
     <h1>Write <a href="#">a headline</a> that makes people do kind of a double take whenthey read it.</h1> 
 
    </section>

來源

2016-11-11 MuhammadJ

當您添加或更改邊框的寬度，改變大小元素。因此，在懸停時添加邊框時，該框會增大以佔據更多空間，這會自然改變周圍文本的位置。

解決此問題的一種方法是始終使邊框呈現，因此框的大小是固定的。但在沒有邊框可見的狀態下，請使邊框顏色透明。

下面是一個例子：

section { 
 
    position: relative; 
 
    height: 300px; 
 
    padding: 15px 80px; 
 
    z-index: 1; 
 
} 
 
section h1 { 
 
    font-size: 3em; 
 
    font-weight: 100; 
 
    line-height: 1.3; 
 
} 
 
section a { 
 
    position: relative; 
 
    display: inline-block; 
 
    text-decoration: none; 
 
    transition: all 0.3s ease-in-out; 
 
    vertical-align: bottom; 
 
} 
 
section.twelve { 
 
    background: #121A5A; 
 
    color: #FFFAFF; 
 
} 
 
section.twelve a { 
 
    color: #D8315B; 
 
    font-weight: 700; 
 
    overflow: hidden; 
 
    padding: 0px 5px; 
 
    transition all 0.2s ease; 
 
    border-bottom: 5px solid transparent; /* ADJUSED */ 
 
} 
 
.twelve a:before { 
 
    content: ""; 
 
    top: 0; 
 
    left: 0; 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 100%; 
 
    background: #FFFAFF; 
 
    z-index: -1; 
 
    transition: all 0.2s ease; 
 
    transform: translateX(100%); 
 
} 
 
.twelve a:hover::before { 
 
    transform: translateX(-95%); 
 
    background: #D8315B; 
 
} 
 
.twelve a:hover { 
 
    color: #FFFAFF; 
 
    transform: translateX(5px); 
 
    border-bottom: 5px solid white;  /* ADJUSED */ 
 
}

<section class="twelve"> 
 
    <h1>Write <a href="#">a headline</a> that makes people do kind of a double take whenthey read it.</h1> 
 
</section>

來源

2016-11-11 21:42:13

是，懸停要更改元素的邊框，因此，元素的總高度也改變

來源

2016-11-11 21:39:08 br3t

在懸停移動元素上添加邊框並移動周圍元素

回答

相關問題