Question

我遇到的一个常见问题是我想让一个元素在悬停时有一个边框，但是当边框进入元素时，计算出的高度和宽度会增加，使其在视觉上跳跃，有时会推动元素。有没有办法在不使用max-width和max-height的情况下解决这个问题？

<style>
    #mydiv { background: yellow; padding: 15px; border: 0; }
    #mydiv:hover { border: 1px solid black; }
</style>
<div id="mydiv">
    <p>Here's an element. Watch the text jump when the border appears.</p>
</div>

Answer 1

没有边框没有悬停时，如何给它一个透明的1px边框呢？这样，它总是具有相同的间距，悬停时只有不同的颜色。

<style>
    #mydiv { background: yellow; padding: 15px; border: 1px solid transparent; }
    #mydiv:hover { border-color: black; }
</style>
<div id="mydiv">
    <p>Here's an element. Watch the text jump when the border appears.</p>
</div>

Answer 2

我认为您需要将box-sizing: border-box;添加到#mydiv的CSS中。这意味着填充和边框包含在元素高度和宽度中，而不是除了。

或..将边框设置为黄色以匹配内容div背景颜色。

Answer 3

实现此目的的最简单方法是默认应用透明边框：

<style>
    #mydiv {
        background: yellow; 
        padding: 15px; border: 0;
        border: 1px solid rgba(0,0,0,0);
    }
    #mydiv:hover { border: 1px solid black; }
</style>

Answer 4

使用box-sizing:border-box使您的宽度和高度包含您的边框

http://www.w3schools.com/cssref/css3_pr_box-sizing.asp

border-box - 宽度和高度属性（以及最小/最大属性）包括内容，填充和边框，但不包括边距

如何在悬停时创建带边框的元素不会增加其计算的高度/宽度

4 个答案: