在悬停移动元素上添加边框并移动周围元素

只需悬停对下面的代码段中的'标题'，您将看到元素如何移动。为什么？在悬停移动元素上添加边框并移动周围元素

没有余量..而且他们只是在将边框添加到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

在悬停移动元素上添加边框并移动周围元素

回答

相关问题