CSS hover заставляет перемещать другие элементы

Question

Я хочу расти границами наведите указатель мыши. Однако это влияет на все остальные элементы позиционирования.

Кодекс (https://jsfiddle.net/s2m3vtbb/):

.nicePeopleItem { 
 
    display:inline-block; 
 
} 
 
.nicePeopleItem img{ 
 
    border-radius:48px; 
 
    border: 4px solid #D568A8; 
 
    padding: 2px; \t 
 
    transition-duration:0.3s; \t 
 
    cursor:pointer; 
 
} 
 
.nicePeopleItem img:hover{ 
 
    border: 10px solid #D568A8; 
 
    transition-duration:0.3s; 
 
}

<div class="carrousel"> 
 
    <div class="nicePeopleItem"> 
 
    <img src="http://placehold.it/48x48"> 
 
    </div> 
 
    <div class="nicePeopleItem"> 
 
    <img src="http://placehold.it/48x48"> 
 
    </div> 
 
    <div class="nicePeopleItem"> 
 
    <img src="http://placehold.it/48x48"> 
 
    </div> 
 
    <div class="nicePeopleItem"> 
 
    <img src="http://placehold.it/48x48"> 
 
    </div> 
 
</div>

Я пытался добавить некоторые поля, отступы, некоторые абсолютное позиционирование без успеха.

Answer 1

Вы могли бы заменить border с box-shadow, например,

border: 10px solid #D568A8; 

должен стать

box-shadow: 0 0 0 10px #D568A8; 

При увеличении только это свойство вычисленная ширина/высота элемента не изменится (потому что нет геометрии изменить) таким образом, это не повлияет на позицию смежных статических изображений, которые частично перекрываются box-shadow.

Codepen Demo

Примечание: в случае, если вы не хотите, чтобы перекрытие на hover состоянии, просто увеличить маржу между элементами.

Answer 2

Это потому, что элементы имеют display: inline-block. Это означает, что все элементы будут по умолчанию привязаны к базовой линии, и, поскольку один элемент станет больше (из-за более толстой границы), он будет сдвигать другие элементы вниз.

Вы можете добавить vertical-align: top; к элементам, чтобы все они были выровнены сверху, а не базовой линии, и это помешало бы другим быть нажатым. Обратите внимание, что элементы после того, что будет нависнуть, все равно будут сдвигаться вправо из-за увеличения границы того, на котором нависнет. (Если вы хотите, чтобы избежать этого также не произошло, то с помощью теней вместо границы, как упомянуто в fcalderan's answer будет лучше.)

.nicePeopleItem { 
 
    display: inline-block; 
 
} 
 
.nicePeopleItem img { 
 
    border-radius: 48px; 
 
    border: 4px solid #D568A8; 
 
    padding: 2px; 
 
    transition-duration: 0.3s; 
 
    cursor: pointer; 
 
    vertical-align: top; 
 
} 
 
.nicePeopleItem img:hover { 
 
    border: 10px solid #D568A8; 
 
    transition-duration: 0.3s; 
 
}

<div class="carrousel"> 
 
    <div class="nicePeopleItem"> 
 
    <img src="http://placehold.it/48x48"> 
 
    </div> 
 
    <div class="nicePeopleItem"> 
 
    <img src="http://placehold.it/48x48"> 
 
    </div> 
 
    <div class="nicePeopleItem"> 
 
    <img src="http://placehold.it/48x48"> 
 
    </div> 
 
    <div class="nicePeopleItem"> 
 
    <img src="http://placehold.it/48x48"> 
 
    </div> 
 
</div>

Answer 3

Вы можете добавить отрицательный запас к зависанию, чтобы компенсировать рост ширины границы.

Просто добавьте: margin: -6px;

.nicePeopleItem img:hover 
{ 
    border: 10px solid #D568A8; 
    transition-duration:0.3s; 
    margin:-6px; 
} 

Fiddle

Это не играет очень хорошо с переходом, хотя. Без перехода это работает отлично.