我想在悬停事件中为我的按钮添加边框而不移动按钮或任何东西

Question

现在我想在按钮上悬停时实现边框.

该按钮与其他3个按钮一起位于div中.但是,只要我将鼠标悬停在它上面,就会显示边框,但同时按钮也会扩大添加边框的大小,这不是我的想法.

我做了一个小提琴来证明这个问题:点击我

我在这里读到了这个主题,我确实找到了一个解决方案margin-top: 3px; ,然而,通过添加到悬停类,"挤压"按钮,这不是我想要的.

相反,我希望按钮不会看起来像压缩或任何东西,而只是简单地用4px边框覆盖按钮的前4个px.

有什么建议？

提前致谢

Answer 1

您可以尝试使用框阴影,因为这实际上不会影响定位:

a {
  transition: all 0.8s;
  margin: 5px;
  text-decoration: none;
  display: inline-block;
  background: lightgray;
  height: 50px;
  width: 150px;
  line-height:50px;
  text-align: center;
  color:black;
}
a:hover {
  box-shadow: 0 -3px red;
}

<a href="#">HOVER ME</a><a href="#">NOTICE</a><a href="#">HOW</a><a href="#">I</a><a href="#">DON'T</a><a href="#">MOVE?</a>

Answer 2

我创建了一个简单的例子：http : //jsfiddle.net/alexcoady/ogoy21dq/
还有一个只有顶部或底部http://jsfiddle.net/alexcoady/ogoy21dq/2/

当它不可见时使用边距替换边框宽度。

button {
    margin: 3px;
    border: 1px solid red;
}

button:hover {
    margin: 0px;
    border: 4px solid red;
}