Объекты встроенного блока CSS, расширяющиеся при наведении, элементы теряют свой порядок при наведении указателя мыши

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

Вот решение для Вас, где они остаются на месте на hover.

Это можно сделать и с псевдоэлементом, хотя я использовал дополнительный div, если вы намерены разместить в нем больше контента.

.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; 
 
}

<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>

Answer 2

просто удалить position:absolute; от вашего выбора .floating-box:hover

position:absolute; переводит элемент «из» нормального потока элементов, и по этой причине вы см. последний элемент вашей сетки, «исчезающий», состоит в том, что все элементы после зависания возвращаются на одно место, так как зависающий (расположенный абсолют) был просто вынут из потока.

Answer 3

удалите 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 4

я закрепил свой код в 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 5

Изменить .floating ящик: парить положение относительного

.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 
 
}

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

Answer 6

Удаление position:absolute; и вставить transition: all .3s ease; для одушевленных

демо: https://jsfiddle.net/ujt5qcfv/

Answer 7

Снимите положение абсолютного и добавить несколько переходов, чтобы сделать его презентабельно. Вы добавив высоту при парить на ДИВ То почему элементы ниже движутся. Heres скрипки:

position:absolute 

https://jsfiddle.net/s7grcqws/