Почему при всевдоклассе :hover, сдвигаются элементы? Как это починить?

Question

[Павел migelonio]

У меня есть три элемента в горизонтальном ряду. При :hover, который действует на первый элемент(#halloween_partyIcon), остальные два сдвигаются в левую сторону. Как это починить?

#halloween_partyIcon {
    height: 400px;
    margin-top: 60px;
    margin-left: 60px;
    border-radius: 5px;
}

#halloween_partyIcon:hover {
    border-style: outset;
    border: 3px solid black;
}

#wedding_icon {
    height: 400px;
    margin-left: 40px;
    margin-top: 10px;
    border-radius: 5px;
}

#wedding_icon:hover {
    border-style: outset;
    border: 3px solid black;
}

#portrait_photo {
    height: 400px;
    margin-left: 1180px;
    position: absolute;
    margin-top: 3px;
    border-radius: 5px;
}

#portrait_photo:hover {
    border-style: outset;
    border: 3px solid black;
}

Фото загрузить почему-то не получается.

Comments

[Антон Литвиненко]

Потому что border добавляет размер элементам

[Павел migelonio]

Антон Литвиненко, но другие два элемента не смещаются

[Ankhena]

Павел migelonio, почитайте про свойство box-sizing

Answer 1

[Квазиморд Сидорович]

Потому что ваш элемент при событии hover становится шире на 6 пикселей (3 слева + 3 справа).
Варианты решения:
1 используйте вместо border свойство outline - оно не добавляет размеров и рисуется новым слоем
2 добавьте border вашему элементу (без hover) такой же толщины, но прозрачный или цвета фона. Тогда при наведении будет меняться цвет бордера, а размер не изменится.

Comments

[Павел migelonio]

Спасибо! Помогли

[Павел migelonio]

А можете еще подсказать, как сделать наоборот, что бы все элементы сдвигались и в одну сторону (в право, в низ), при действии :hover

[Александр Васильев]

наверное, это на фриланс

[Павел migelonio]

Александр Васильев, наверное