Question

我试图在悬停效果上向我的元素添加border属性。我遇到了一些问题。

我有什么

当我将<i>元素悬停时，css为其添加了border属性。但是它改变了元素的位置，所以它向下移动了一点点。

以下是悬停时的<i> CSS属性：

  border: 3px solid rgba(0,0,0,0.3);
  background-color: rgba(255,255,255,1);

我想要什么

当我悬停元素时，它只是在外面添加边框时保持在它的位置。最好的方法是什么？

P.S

我首先尝试将透明属性应用于边框，但它对我没有帮助，因为它改变了元素的宽度和高度。 http://prntscr.com/93dz61 当它不悬停时，我需要更小的元素 http://prntscr.com/93e06t

Answer 1

您可能需要查看box-sizing CSS property。

如果没有实际代码，很难准确确定发生了什么，但我怀疑您的run()未设置为box-sizing。

该属性告诉渲染器在计算元素的宽度和高度时包含边框（和填充），而不是将其添加为额外空间。

尝试将其添加到样式表并调整宽度/高度。你可能会得到你需要的东西。

Answer 2

位置发生变化，因此请将其更改回来：）

 border: 3px solid rgba(0,0,0,0.3);
 background-color: rgba(255,255,255,1);
 margin-left: -2px;
 margin-top: -2px;

我不知道它是否是最佳方式，可能需要进行一些更改，但它可能会有效。

Answer 3

这可能对您有所帮助

i
{
border:3px solid transparent;
box-sizing:border-box;
    }

i:hover{
 border: 3px solid rgba(0,0,0,0.3);
  background-color: rgba(255,255,255,1);
}

为元素添加边框会改变它的位置

3 个答案: