Question

我在鼠标悬停上为按钮添加了边框，但这会扰乱HTML布局。如何在不打扰HTML布局的情况下执行此操作？

Answer 1

为什么一直没有边框，但最初它的颜色与背景相同，所以它实际上是透明的？

然后只需在鼠标悬停时更改颜色。

Answer 2

在悬停时，按边框x2的像素宽度缩小按钮的宽度。

例如，如果按钮宽度为100px并且您一直在添加1px边框，那么在悬停时CSS应为：

width: 98px;
border: 1px solid #000;

Answer 3

您可以使用css box-sizing属性写如下：

.child:hover{
    border:1px solid green;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
}

选中此http://jsfiddle.net/zFJHV/1/

或

你可以使用

div{
 border-bottom:1px solid red;
 margin-bottom:-1px;
}

修改

您可以使用outline而不是border来检查：

http://jsfiddle.net/zFJHV/2/

Answer 4

有几种可能的解决方案，其中一些已在其他答案中公布。

如果你想要一个边框一直围绕元素，最简单和最简单的方法是添加一个轮廓。轮廓不会影响元素的流动，但它们不适用于单个方面。（他们的目的是用于调试而不是设计。）

button:hover { outline: 1px solid black; }

Stephanie减少元素宽度的解决方案不会移动页面上的其他元素，但由于缩小元素的大小，内部的内容将被移动。（编辑：实际上理论上这可以将一些文本包装到一个额外的行上，从而推动其他一些元素。）

您可以在悬停时设置负边距，如sandeep所说（在他的原始答案中），这有效地取消了元素使用的额外空间。据我所知，这不会影响流量，但可能存在边缘情况。

button:hover { border: 1px solid black; margin: -1px; } /* all sides*/
button:hover { border-bottom: 1px solid black; margin-bottom: -1px; } /* bottom only */

另一个解决方案是将边框设置为与背景颜色相同（正如Sir Crispalot建议的那样），或者您可以使其透明。然后在悬停时更改颜色。使其透明将适用于任何颜色背景，但元素的背景颜色（在您的情况下按钮）将显示。

/* for a patterned page background: */
button { border-bottom: 1px solid transparent; }
button:hover { border-bottom: 1px solid black; }

/* or, if the button has a background colour: */
button { border-bottom: 1px solid #fff; }
button:hover { border-bottom: 1px solid black; }

Answer 5

在悬停按钮上，添加边框并减小每个宽度和高度2像素。这不会改变布局。

CSS边框属性

5 个答案: