当鼠标悬停在按钮上时，我想为按钮添加边框，而不移动按钮或任何其他东西。

Question

现在我想要在按钮上悬停时实现边框效果。

该按钮与另外三个按钮一起在一个div中。然而，当我将鼠标悬停在按钮上时，边框被显示出来，但同时按钮的大小也随之扩大了添加的边框大小，这不是我的意图。

我制作了一个小demo来演示这个问题：点击这里

我在这里阅读了相关主题，并确实找到了解决方案，即在hover类中添加margin-top: 3px;，但是这会“挤压”按钮，这不是我想要的。

相反，我希望按钮看起来不会被压缩或变形，而只是使用4px的边框覆盖按钮顶部的4个像素。

有什么建议吗？

谢谢！

- Sossenbinder

---

受欢迎的问题！ - Dan Beaulieu

您可能也会对这个问题感兴趣：在不移动元素的情况下在悬停时添加CSS边框。 - jbutler483

在你的CSS中将所有按钮设置为Box-sizing: Border-box。然后问题就解决了。 - Opaw Nako

你是否在这里寻找红色部分中的那一个：http://tympanus.net/Development/CreativeButtons/？ - Rahul Desai

https://jsfiddle.net/alexcoady/L9dfg74f/7/ - Alex

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>

- jbutler483

---

我没想到你可以只添加“transition: all 0.8s;”，非常酷 +1。 - Dan Beaulieu

适用于任何可动画属性。 - jbutler483

不到0.1%的人使用IE7。 - Dan Beaulieu

@DanBeaulieu 是的，我知道并且讨厌那些0.1%的人。但是你也必须考虑到他们。特别是当你正在为公司内部使用制作Web应用程序时。 - Ankit

@Ankit：如果他们使用的是IE7，那么阴影框将不会显示。这不会破坏任何功能。你甚至可以给他们更新的说明（即使微软很快就会停止支持IE8）。 - jbutler483

Answer 2

我创建了一个快速的示例：http://jsfiddle.net/alexcoady/ogoy21dq/
还有一个只有顶部或底部的示例：http://jsfiddle.net/alexcoady/ogoy21dq/2/ 当边框不可见时，使用 margin 代替 border-width。

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

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

- Alex

---

@afasm93 这是一个不错的解决方案，你也可以将初始边框设置为白色（或背景颜色），然后在悬停时简单地更改边框颜色。 - Dan Beaulieu

@DanBeaulieu：或者可以将其设置为透明... - jbutler483

@jbutler483，这是给你的。 - Dan Beaulieu

由于OP的样式中有1像素的默认边框，因此无法执行任何一项操作。 - Alex

Answer 3

你可以：

• 使用 box-shadow 属性。这里有一个演示案例：fiddle demo

.functionButton:hover{
  box-shadow: 0 -4px 0 0 #a3def1;
}

- Roko C. Buljan

---

始终保持正确的答案！！ - Alexander Solonik

默认情况下，OP具有1像素的边框。 - Alex

Answer 4

将按钮的 vertical-align 样式设为 top。在 CSS 文件底部添加以下样式：

#functionButtonDiv button{
    vertical-align: top;
}

更新的 jsFiddle

---

了解更多： vertical-align | MDN

- Rahul Desai

Answer 5

尝试理解正在发生的事情。

您希望按钮不被挤压，但是在顶部添加一个边框。

最初，您的按钮高度为25px，边框为1px。

当鼠标悬停时，您的高度保持不变，但边框增加了3px，从而使按钮挤压。

解决方案：

悬停：必须增加高度以适应增加的边框（4px-1px = 3px）（为了不挤压按钮）。

如果只这样做，您会发现按钮开始向下移动。

为避免此问题，在您的functionButton类中添加4-1 = 3px的边距来补偿增加的高度。

同样，在hover类中添加-3px的边距，因为高度已经增加了3px。

.functionButton{
  width:60px;
  height:25px;
  border: 1px solid #A3DEF1;
  border-left: none;
  outline:none;
  background: #F2F5FD;
    margin-top:3px;    //added to avoid shifting of buttons down on hover (Here it compensates the increased height while hovering)
}

.functionButton:hover{
  border-top: 4px solid #A3DEF1;
  height:28px;   //increased height to accomodate the increased border
  margin-top:-3px;      //negative margin to avoid shifting of button down
}

.functionButton{
  width:60px;
  height:25px;
  border: 1px solid #A3DEF1;
  border-left: none;
  outline:none;
  background: #F2F5FD;
  margin-top:3px;
}

.functionButton:hover{
  width:60px;
  height:28px;
  border-top: 4px solid #A3DEF1;
  margin-top:-3px;
}

<div class="functionButtonDiv" id="functionButtonDiv">
    <button type="button" class="functionButton">Dummy2</button>
    <button type="button" class="functionButton">Dummy3</button>
    <button type="button" class="functionButton">Dummy4</button>
</div>

- Ankit

---

或者修改为 box-sizing: border-box; - Alex

用户有很多解决方案... 我的重点是向他解释正在发生的事情。 - Ankit

谢谢您的解释！我发现盒子阴影的答案最合适，但是您的解释让问题变得清晰明了！ - Sossenbinder

Answer 6

你可能不需要使用Javascript来完成这个。

你可以使用box-sizing来确保边框包含在你的尺寸中，并使用垂直对齐来保持位置。

button {
    vertical-align: top;    
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

button {
  vertical-align: top;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.functionButtonChat {
  width: 60px;
  height: 25px;
  border: 1px solid #A3DEF1;
  outline: none;
  background: #F2F5FD;
}
.functionButtonChat:hover {
  border-left: 4px solid #A3DEF1;
  border-top: 4px solid #A3DEF1;
}
.functionButton {
  width: 60px;
  height: 25px;
  border: 1px solid #A3DEF1;
  border-left: none;
  outline: none;
  background: #F2F5FD;
}
.functionButton:hover {
  border-top: 4px solid #A3DEF1;
}

<div class="functionButtonDiv" id="functionButtonDiv">
  <button type="button" class="functionButtonChat">Dummy1</button>
  <button type="button" class="functionButton">Dummy2</button>
  <button type="button" class="functionButton">Dummy3</button>
  <button type="button" class="functionButton">Dummy4</button>
</div>

- Paulie_D

---

你可能想快速检查一下这个；P - jbutler483

Answer 7

使用以下CSS，我已经对您的CSS进行了一些更改，并且它按照您的要求工作，请尝试以下内容

.functionButtonChat{
     width:80px;
     height:25px;
     outline:none;
     background: #F2F5FD;
}

.functionButtonChat:hover{
     border: 4px solid #A3DEF1;
}

.functionButton{
     width:80px;
     height:25px;
     outline:none;
     background: #F2F5FD;
}

.functionButton:hover{
      border: 4px solid #A3DEF1;
}

- anand kulkarni