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

Question

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

简短版本：

只是为了清楚地说明我想要实现的目标，这是页面 https://www.facebook.com/MercedesBenzPolska/ 我想向目标元素（我悬停在其上）添加边框，无论它是 <div> or <img> or <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 都反映了同样的问题，默认的 1px 透明边框会破坏页面的 css 如果我不这样做，悬停边框应用程序会变得不稳定页面 css 无论如何都会中断

Answer 1

您可以在 css 中使用 box-sizing 属性。尝试使用和不使用框大小属性

下面的代码

<div class="item">

</div>

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

Answer 2

我会从这样的事情开始，然后从那里开始：

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

使用伪元素而不是在实际对象上放置边框可能不会对初始布局产生那么多问题。仍然不完全符合您的要求，但我相信它至少更接近一点。 :-)

编辑

我认为尽可能好地实现这一点的唯一方法是在 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

框阴影：0px 0px 0px 1px #000；

使用框阴影代替边框。 box-shadow不占space.

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

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

<div> Test </div>

Answer 4

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>

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

How to Apply border to all the elements [on hover] of facebook's page without disrupting the entire page's look and feel

html

css

onhover