正在按下按钮正在转换

Question

我遇到了两个应用了转换的列表项的问题。当你将鼠标悬停在其中一个上面时，它会展开以显示更多信息，但会推倒另一个项目。

只有在添加overflow:hidden时才会发生这种情况。删除，一切按预期行事。这里是我的jsfiddle https://jsfiddle.net/0g9mttdm/1/谢谢。

.homepage-buttons { 
 
    width: 100%; 
 
    margin: -100px 0; 
 
    left: 0; 
 
    right: 0; 
 
    text-align: center; 
 
} 
 

 
.homepage-buttons ul { 
 
    list-style-type: none; 
 
} 
 

 
.homepage-buttons ul li { 
 
    display: inline-block; 
 
    margin: 0 -2px; 
 
    border: 1px solid #9DBC43; 
 
    padding: 15px; 
 
    width: 25%; 
 
    height: 170px; 
 
    background: transparent; 
 
    transition: width 1s, height 1s linear 0.5s; 
 
    overflow: hidden; 
 
} 
 

 
.homepage-buttons ul li:hover { 
 
    width: 450px; 
 
    height: 450px; 
 
} 
 

 
.fa-users, 
 
.fa-briefcase { 
 
    color: #9DBC43; 
 
} 
 

 
.btn-circle.btn-xl { 
 
    position: relative; 
 
    z-index: 30; 
 
    width: 150px; 
 
    height: 150px; 
 
    padding: 10px 16px; 
 
    line-height: 1.33; 
 
    border-radius: 100px; 
 
    font-size: 28px; 
 
    box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.8); 
 
} 
 

 
.btn-default { 
 
    background-color: #4E545F; 
 
    border: 10px solid #9DBC43; 
 
    color: #fff; 
 
} 
 

 
.btn-default:hover { 
 
    background-color: #4A6400; 
 
    border: 10px solid #4A6400; 
 
    color: #fff; 
 
    transform: scale(1.1); 
 
} 
 

 
.btn-primary { 
 
    background-color: #4E545F; 
 
    border: 10px solid #9DBC43; 
 
    color: #fff; 
 
} 
 

 
.btn-primary:hover { 
 
    background-color: #004435; 
 
    border: 10px solid #004435; 
 
    color: #fff; 
 
    transform: scale(1.1); 
 
}

<div class="homepage-buttons"> 
 
    <ul> 
 
    <li><button class="btn btn-default btn-circle btn-xl" type="button"><i class="fa fa-users" aria-hidden="true"></i></button><br /> 
 
     <h4>Personal</h4> 
 
     <h5>Hello there</h5> 
 
    </li> 
 
    <li><button class="btn btn-primary btn-circle btn-xl" type="button"><i class="fa fa-briefcase" aria-hidden="true"></i></button><br /> 
 
     <h4>Corporate</h4> 
 
     <h5>Hello there</h5> 
 
    </li> 
 
    </ul> 
 
</div>

Answer 1

那是因为你的li s为inline-block和vertical-align是baseline默认。

更改为vertical-align: top和你做 - 看下面的演示：

.homepage-buttons { 
 
    width: 100%; 
 
    margin: -100px 0; 
 
    left: 0; 
 
    right: 0; 
 
    text-align: center; 
 
} 
 

 
.homepage-buttons ul { 
 
    list-style-type: none; 
 
} 
 

 
.homepage-buttons ul li { 
 
    display: inline-block; 
 
    vertical-align: top; 
 
    margin: 0 -2px; 
 
    border: 1px solid #9DBC43; 
 
    padding: 15px; 
 
    width: 25%; 
 
    height: 170px; 
 
    background: transparent; 
 
    transition: width 1s, height 1s linear 0.5s; 
 
    overflow: hidden; 
 
} 
 

 
.homepage-buttons ul li:hover { 
 
    width: 450px; 
 
    height: 450px; 
 
} 
 

 
.fa-users, 
 
.fa-briefcase { 
 
    color: #9DBC43; 
 
} 
 

 
.btn-circle.btn-xl { 
 
    position: relative; 
 
    z-index: 30; 
 
    width: 150px; 
 
    height: 150px; 
 
    padding: 10px 16px; 
 
    line-height: 1.33; 
 
    border-radius: 100px; 
 
    font-size: 28px; 
 
    box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.8); 
 
} 
 

 
.btn-default { 
 
    background-color: #4E545F; 
 
    border: 10px solid #9DBC43; 
 
    color: #fff; 
 
} 
 

 
.btn-default:hover { 
 
    background-color: #4A6400; 
 
    border: 10px solid #4A6400; 
 
    color: #fff; 
 
    transform: scale(1.1); 
 
} 
 

 
.btn-primary { 
 
    background-color: #4E545F; 
 
    border: 10px solid #9DBC43; 
 
    color: #fff; 
 
} 
 

 
.btn-primary:hover { 
 
    background-color: #004435; 
 
    border: 10px solid #004435; 
 
    color: #fff; 
 
    transform: scale(1.1); 
 
}

<div class="homepage-buttons"> 
 
    <ul> 
 
    <li><button class="btn btn-default btn-circle btn-xl" type="button"><i class="fa fa-users" aria-hidden="true"></i></button><br /> 
 
     <h4>Personal</h4> 
 
     <h5>Hello there</h5> 
 
    </li> 
 
    <li><button class="btn btn-primary btn-circle btn-xl" type="button"><i class="fa fa-briefcase" aria-hidden="true"></i></button><br /> 
 
     <h4>Corporate</h4> 
 
     <h5>Hello there</h5> 
 
    </li> 
 
    </ul> 
 
</div>