CSS a: наведите границы изображения

Question

У меня есть куча связанных изображений в таблице с некоторыми отступами. Когда я пытаюсь добавить атрибут img: hover или a: hover border, когда появляется граница, все перемещается на количество пикселей, на которые граница толстая. Есть ли способ остановить это поведение?

Answer 1

img {
    border: solid 10px transparent;
}
img:hover {
    border-color: green;
}

Answer 2

img:hover {
  border: solid 2px red;
  margin: -2px;
}

Кажется, работает для меня (Safari 6.0.5). Не добавлено пробела, так как граница нарисована внутри img.

Answer 3

Проблема в том, что вы добавляете границу к элементу, который занимает место - другие элементы на странице должны перемещаться, чтобы освободить место для него.

Решение состоит в том, чтобы добавить границу, котораясоответствует фону, а затем просто измените цвет или стиль при наведении.Другая возможность - сделать блок больше, чем вы изначально предполагали, а затем изменить его размер, чтобы он соответствовал добавляемой границе.