正在按下按钮正在转换
问题描述:
我遇到了两个应用了转换的列表项的问题。当你将鼠标悬停在其中一个上面时,它会展开以显示更多信息,但会推倒另一个项目。正在按下按钮正在转换
只有在添加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>
答
那是因为你的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>
谢谢你这一点。修复! – colinfuturetech
欢迎您:) – kukkuz
我其实有一个后续问题。这是允许的吗?我将如何改变高度扩展的方向?目前隐藏的内容在下面显示,但是如果我想要隐藏的内容在按钮后面,它会向上扩展以揭示隐藏的内容? – colinfuturetech