Question

我使用HTML和CSS制作一些在悬停时扩展的内联块框。但问题是，当悬停在不同于最后一个块的任何块上时，其中一个框消失，并且在选择第一个在线时发生奇怪的事情并且其中一个正在向上移动。我尝试了不同的东西，但似乎没有任何帮助。这是CSS代码：

.floating-box {
    display: inline-block;
    width: 120px;
    height: 125px;
    margin-bottom: 1px;
    border: 1px solid #aaaa80;
    text-align: center;
    overflow: hidden;
    vertical-align: top;
}

.floating-box:hover {
    height:150px;
    padding-bottom: 5px;
    width:120px;
    position:absolute;
    background-color: #e0e0d1;
    padding-right: 1px 
}

和JSfiddle：https://jsfiddle.net/6Lms6ve8/

Answer 1

只需从position:absolute;选择器

中删除.floating-box:hover即可

position:absolute;将元素＆＃34; out＆＃34;元素的正常流动，以及你看到你的网格的最后一个元素＆＃34;消失的原因＆＃34;是因为悬停的一个元素（绝对位置）被拉出流动之后，所有元素都会在一个地方返回。

Answer 2

请删除position

.floating-box {
    display: inline-block;
    width: 120px;
    height: 125px;
    margin-bottom: 1px;
    border: 1px solid #aaaa80;
    text-align: center;
    overflow: hidden;
    vertical-align: top;
}

.floating-box:hover {

    padding-bottom: 5px;
    width:120px;
     height:150px;
    background-color: #e0e0d1;
    padding-right: 1px
}

DEMO HERE

Answer 3

我已经在jsfiddle中修复了你的代码。

* {
  box-sizing:border-box;
  -webkit-box-sizing:border-box;
  -ms-box-sizing:border-box;
  -moz-box-sizing:border-box;
}

.floating-box {
    display: inline-block;
    width: 120px;
    height: 125px;
    margin-bottom: 1px;
    border: 1px solid #aaaa80;
    text-align: center;
    overflow: hidden;
    vertical-align: top;
    margin-bottom:4px;
}

.floating-box:hover {
    padding-bottom: 5px;
    width:120px;
    background-color: #e0e0d1;
    padding-right: 1px
}

Answer 4

更改.floating-box：悬停位置为相对

http://www.quartz-scheduler.org/

.floating-box {
    display:inline-block;
    width: 120px;
    height: 125px;
    margin-bottom: 1px;
    border: 1px solid #aaaa80;
    text-align: center;
    overflow: hidden;
    vertical-align: top;
}

.floating-box:hover {
    height:150px;
    padding-bottom: 5px;
    width:120px;
    position:relative;
    background-color: #e0e0d1;
    padding-right: 1px
}

Answer 5

以下是hover保留所在地的解决方案。

这也可以使用伪元素完成，但如果你打算在其中包含更多内容，我会使用额外的div。

＆＃13;

.floating-box {
  position: relative;
  display: inline-block;
  width: 120px;
  height: 125px;
  margin-bottom: 2px;
  vertical-align: top;
}
.floating-box .box-wrapper {
  width: 100%;
  height: 100%;
  border: 1px solid #aaaa80;
  box-sizing: border-box;
  text-align: center;
  overflow: hidden;
}

.floating-box:hover .box-wrapper {
  height: 150px;
  position: absolute;
  background-color: #e0e0d1;
  z-index: 1;
}

＆＃13;

<div class="floating-box">
  <div class="box-wrapper">
    <span style="font-size:12px; text-align: justify;">sample text here</span>
  </div>
</div>
<div class="floating-box">
  <div class="box-wrapper">
    <span style="font-size:12px; text-align: justify;">sample text here</span>
  </div>
</div>
<div class="floating-box">
  <div class="box-wrapper">
    <span style="font-size:12px; text-align: justify;">sample text here</span>
  </div>
</div>
<div class="floating-box">
  <div class="box-wrapper">
    <span style="font-size:12px; text-align: justify;">sample text here</span>
  </div>
</div>
<div class="floating-box">
  <div class="box-wrapper">
    <span style="font-size:12px; text-align: justify;">sample text here</span>
  </div>
</div>
<div class="floating-box">
  <div class="box-wrapper">
    <span style="font-size:12px; text-align: justify;">sample text here</span>
  </div>
</div>
<div class="floating-box">
  <div class="box-wrapper">
    <span style="font-size:12px; text-align: justify;">sample text here</span>
  </div>
</div>
<div class="floating-box">
  <div class="box-wrapper">
    <span style="font-size:12px; text-align: justify;">sample text here</span>
  </div>
</div>

＆＃13;

Answer 6

删除position:absolute;并插入transition: all .3s ease;以进行动画

演示：https://jsfiddle.net/ujt5qcfv/

Answer 7

删除绝对位置并添加一些过渡以使其可呈现。在 div 上悬停时添加高度，这就是为什么下面的元素正在移动。继承人小提琴：

position:absolute

https://jsfiddle.net/s7grcqws/

CSS内联块对象在悬停时扩展，元素在悬停时丢失它们的顺序

7 个答案: