html - 如何在不破坏整个页面外观的情况下将边框应用于 facebook 页面的所有元素 [悬停时]

Question

在将此标记为已问之前，请阅读整个场景。谢谢

简短版本:

为了清楚地说明我要实现的目标，这是页面 https://www.facebook.com/MercedesBenzPolska/我想为目标元素(我悬停在其上)添加边框，无论它是 <div>或 <img>或 <p> , 没有摇晃

详细版本

Webpage in question : Facebook 的任何页面。

Requirement :将光标移动到元素上应该为目标元素添加边框[仅在悬停时因此临时边框不是永久的]。仅当我单击该元素时才会添加永久边框。 [简单地说，如果我将鼠标悬停在一个元素上，它会突出显示，比如说，粉红色边框，只有当我点击它时，才会添加绿色边框]

Initial problem :在悬停元素上添加边框会使整个页面的结构不稳定，因为我不断地添加和删除边框。为此，我所做的是为页面的所有元素添加一个透明的 1 px 边框，悬停时只需将边框的颜色从透明更改为粉红色；因此没有动摇。

Present problem :在我遇到 Facebook 页面之前，上述解决方案适用于所有页面。事实证明，添加初始 1 px 边框完全破坏了结构，即页面的外观和感觉。 DIV 从某个地方移动到另一个地方。

我现在如何解决原来的问题？有没有办法，比如，应用负边距或边框，以便添加额外的 1 px 边框不会破坏页面的结构？我不知道我只是建议。请帮忙

[截图]

<强>1。这是页面加载时 [不应用边框]

<强>2。现在，当我将鼠标悬停在包含图像的 div 上时，即在悬停时添加 1 px 边框时，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 都反射(reflect)了同样的问题，默认的 1px 透明边框会破坏页面的 css，如果我不这样做，悬停边框应用程序会变得不稳定，并且页面的 css 无论如何都会被破坏

Answer 1

框阴影: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>