Javascript 在任何页面生成器编辑器中使用html/js/css添加悬停效果而不干扰其视图的最佳方法是什么？

我在一个页面生成器web应用程序中工作，它有一个页面编辑器，应用程序用户可以在其中创建他们的web页面。在编辑器中，所有必需的组件都以小部件的形式提供，用户可以将其拖放到编辑器区域。请参阅附件了解更多详细信息

在编辑器中，还可以编辑以前添加的任何组件。这是通过突出显示悬停组件来实现的。这种情况一次发生一次，所以整个逻辑都是用js编写的，用于在关注的组件上添加/删除悬停css。Border css属性工作得很完美，但唯一的问题是它占用空间。而我的客户机的基本要求是编辑器视图应该与页面预览完全相同。当我允许边框占据空间时，它会干扰我的实际页面GUI，它应该与我的预览相匹配

由于上述原因，我转到大纲，大纲并没有占用任何空间，但有另一个问题，它在Firefox和其他浏览器中表现不同。除了这个高光区域，我还有设置图标，它是通过减去边距来设置的，所以现在在这个例子中，轮廓区域脱离了我在firefox中设置的图标。不仅是这个图标集，而且任何使用-minusmargin设置的东西都令人不安

所以基本上，要么我需要整个场景的替代解决方案，要么我需要解决firefox for-margin中的大纲行为

如果有人经历过这种情况，并且有一些在所有主流浏览器中都能工作的替代解决方案，请告诉我。

您可以查看box shadow。它不会影响高度/宽度的更改

样品 .瓷砖{ 宽度：100px； 高度：100px； } .边界{ 边框：1px纯黑； } .盒子阴影{ 盒影：0px 0px 0px 1px 2424； -网络工具包盒阴影：0px 0px 0px 1px 2424； -moz盒阴影：0px 0px 0px 1px 2424； -o形盒阴影：0px 0px 0px 1px 2424； }

---

感谢@Rajesh的努力，但我不能使用border属性，因为它会花费我1px的费用，这是不允许我使用的，因为它会影响实际的页面预览。@TrimantAsoftwareSolution这就是我建议你使用box shadow的原因。上面的示例显示了比较差异的两种方法。试着检查它们，检查它们的尺寸。我几乎完成了，非常感谢。Firefox和Chrome与box shadow完美配合，明天将检查其他浏览器。