Как применить границу ко всем элементам [при наведении] страницы Facebook, не нарушая внешний вид всей страницы

Question

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

КРАТКАЯ ВЕРСИЯ:

Просто чтобы четко заявить, чего я пытаюсь достичь, вот страница https://www.facebook.com/MercedesBenzPolska/, и я хочу добавить границу к целевому элементу (на котором я нахожусь), будь то <div> или <img> или <p>, без встряхивания

ПОДРОБНАЯ ВЕРСИЯ

Webpage in question: любая из страниц Facebook.

Requirement: перемещение курсора на элемент должно добавить границу к целевому элементу [только при наведении, поэтому временная граница не постоянна]. Постоянная граница будет добавлена ​​ТОЛЬКО если я нажму на этот элемент. [Просто, если я наведу курсор на элемент, он будет выделен, скажем, розовой рамкой, и только когда я нажму на него, будет добавлена ​​зеленая рамка]

Initial problem: добавление границы для элементов при наведении сделает структуру всей страницы шаткой, поскольку я постоянно добавляю и удаляю границу. Для этого я добавил прозрачную границу размером 1 пиксель ко всем элементам страницы, а при наведении измените цвет границы с прозрачного на розовый; таким образом, не шаткий.

Present problem: вышеупомянутое решение работало для всех страниц, пока я не наткнулся на страницу Facebook. Оказывается, добавление начальной границы в 1 пиксель полностью нарушает структуру, то есть внешний вид страницы. DIV перемещаются из одного места в другое.

Как мне теперь решить мою первоначальную проблему? Есть ли способ, например, применить отрицательное поле или границу, чтобы добавление дополнительной границы в 1 пиксель не изменило структуру страницы? Я не знаю, я просто предлагаю. Просьба помочь

[СКРИНШОТЫ]

1. это когда страница загружается [без применения границы]

2. Теперь при наведении курсора на изображение, содержащее элемент div, то есть при добавлении границы на 1 пиксель к элементу hover, элементы div перемещаются тут и там

css Я использую

* { border: 1px solid transparent !important;} // при загрузке страницы

.hover-selected{ border: 1px solid #e42a78 !important;} // на границе при наведении

.option-selected:hover { border: 3px solid #529c56 !important;cursor: default;} // когда выбрана опция

Изображения и css отражают одну и ту же проблему, прозрачная граница 1px по умолчанию нарушает css страницы, и если я этого не делаю, приложение при наведении границы становится шатким, а css страницы в любом случае нарушается

Answer 1

outline идеально подходит для этого. Он работает очень похоже на границы, но никак не влияет на макет.

div:hover {
  outline: 1px solid orange;
}

<div>
  Lorem ipsum sit amet.
</div>
<div>
  <img src="https://placehold.it/200x100">
</div>
<div>
  Lorem ipsum sit amet.
</div>

Answer 2

Я бы начал с чего-то подобного и перешел бы оттуда:

*:hover:last-child:before {
   display:block;
   content:"";
   position:absolute;
   top:0;
   bottom:0;
   left:0;
   right:0;
   border:2px solid red !important;
}

Использование псевдоэлемента вместо наложения границы на фактический объект может не создавать столько проблем с исходным макетом. Все еще не совсем то, что вы просили, но я думаю, что это хотя бы немного ближе. : -)

EDIT

Я считаю, что единственный способ добиться этого как можно лучше - быть менее жадным при выборе элементов в CSS и указывать список следующим образом:

a:hover:before,
img:hover:before{
   display:block !important;
   content:"" !important;
   position:absolute !important;
   top:0 !important;
   bottom:0 !important;
   left:0 !important;
   right:0 !important;
   border:2px solid red !important;
}

Answer 3

box-shadow: 0px 0px 0px 1px # 000;

Используйте тень от рамки вместо рамки. Коробка-тень не занимает места.

div {
    width:300px;
    height:300px;
    background: red;
}

div:hover {
    box-shadow: 0px 0px 0px 1px #000 inset;
}

<div> Test </div>

Answer 4

вы можете использовать box-sizing свойство в css. Попробуйте приведенный ниже код с и без свойства размера блока

<div class="item">

</div>

.item {
  box-sizing: border-box;
  height: 50px;
  width:50px;
  background:red;
}
.item:hover{
  border:1px solid black;
}