正在按下按鈕正在轉換

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>