时间戳

首页 > 解决方案 > 如何将边框应用于facebook页面的所有元素[悬停]而不破坏整个页面的外观

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

问题描述

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

简洁版本 ：

只是为了清楚地说明我想要实现的目标，这是页面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 都反映了同样的问题，默认的 1px 透明边框会破坏页面的 css，如果我不这样做，悬停边框应用程序会变得不稳定，并且页面的 css 无论如何都会被破坏

标签： htmlcssonhover

解决方案

盒子阴影：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>

推荐阅读