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

现在我想在悬停按钮上实现一个边框

该按钮与其他3个按钮位于一个div中。然而，当我将鼠标悬停在它上面时，边框就会显示出来，但同时按钮也会扩展添加边框的大小，这不是我所想的

我用小提琴来演示这个问题：

我在这里读到了这个话题，我确实找到了一个解决方案，添加了

margintop:3px
然而，对于hover类，它“挤压”按钮，这不是我想要的

取而代之的是，我不想让按钮看起来像是被压缩的或者其他什么，而是简单地在按钮的顶部4像素上覆盖一个4像素的边框

有什么建议吗

提前感谢
您可以：


使用
框阴影



设置按钮样式，使其垂直对齐到顶部。将以下样式添加到CSS的底部：

#functionButtonDiv button{
    vertical-align: top;
}



阅读：
您可能不需要Javascript来完成此操作

可以使用框大小来确保尺寸中包含边框，并使用垂直对齐来保持位置

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


按钮{
垂直对齐：顶部；
-webkit框大小：边框框；
-moz框大小：边框框；
框大小：边框框；
}
.functionButtonChat{
宽度：60px；
高度：25px；
边框：1px实心#A3DEF1；
大纲：无；
背景#F2F5FD；
}
.functionButtonChat:悬停{
左边框：4px实心#A3DEF1；
边框顶部：4px实心#A3DEF1；
}
.功能按钮{
宽度：60px；
高度：25px；
边框：1px实心#A3DEF1；
左边界：无；
大纲：无；
背景#F2F5FD；
}
.功能按钮：悬停{
边框顶部：4px实心#A3DEF1；
}

笨蛋
傻瓜2
傻瓜3
傻瓜4
您可以尝试改用方框阴影，因为这实际上不会影响定位：


a{
过渡：所有0.8秒；
保证金：5px；
文字装饰：无；
显示：内联块；
背景：浅灰色；
高度：50px；
宽度：150px；
线高：50px；
文本对齐：居中；
颜色：黑色；
}
a:悬停{
盒影：0-3px红色；
}
我创建了一个快速示例：

和一个只有顶部或底部

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

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

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

试着去理解正在发生的事情

您不希望按钮被挤压，而是希望在顶部添加边框

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

.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
}

悬停时您的
高度
保持不变，但是
边框
增加了
3px
，因此您的按钮会被挤压

解决方案：

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

如果您只这样做，您将观察到按钮开始向下移动

为避免出现这种情况，请将
边距4-1=3px
添加到
功能按钮类
中，以补偿增加的
高度

同样，在
悬停类
中添加一个
边距
的-
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
}


.function按钮{
宽度：60px；
高度：25px；
边框：1px实心#A3DEF1；
左边界：无；
大纲：无；
背景#F2F5FD；
利润上限：3倍；
}
.功能按钮：悬停{
宽度：60px；
高度：28px；
边框顶部：4px实心#A3DEF1；
利润上限：-3px；
}

傻瓜2
傻瓜3
傻瓜4
使用以下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;
}

@afasm93这是一个很好的解决方案，您也可以将初始边框设置为白色（或任何背景），然后只需更改屏幕上边框的颜色即可hover@DanBeaulieu：或者可以将其设置为透明…@jbutler483，因为OP的stylewell问题中有一个1px的默认边框，所以您也不能这样做！您可能还会发现这个有趣的问题：在CSS中将所有按钮设置为框大小：边框框。然后问题就消失了。您是在这里寻找红色部分中的一个：？还是更改为
框大小：边框框用户有很多解决方案。。。我的重点是向他解释，发生了什么……谢谢你的解释！我发现盒子阴影的答案是最合适的，但解释清楚了我的问题！您可能需要对此进行快速检查；PI没有意识到你可以只添加“过渡：所有0.8s；”，非常酷+1。这适用于任何可设置动画的属性。这是否也适用于IE的旧版本。IE IE7和旧版本？只有不到0.1%的人在使用IE7@Ankit：如果它们在IE7上，则不会显示框阴影。它不会破坏任何功能。你甚至可以给他们指示如何更新（即使是Microsoft）始终是正确的答案！！默认情况下，OP有1px边框