可变高度div由于边框而在悬停时不希望更改大小

Question

有两个条件：

div

• (以及里面的div(必须具有可变的高度。
• 里面的div 必须在将鼠标悬停在它们上方时添加边框。

有一个问题：

悬停的边框会增加div 的高度，因此会进行不希望的高度更改。

如何在不将可变高度更改为固定高度的情况下克服这个问题？

Answer 1

尝试将border-box应用于所有元素：

* {
box-sizing:border-box;
}

Answer 2

不是转换border本身，而是将border-color属性从透明转换为所需值。关键是边框是默认用border-color: transparent定义的边框宽度，因此悬停时只有不断变化的颜色才会产生边框出现的效果。

Answer 3

使用 2 个div。 在当前div中放置一个新div，并将边框设置为新div并将其高度设置为 100%。

示例：https://codepen.io/danieldilly/pen/brbzbZ

Answer 4

有三种方法可以做到这一点。

1. 保持原样(不！
2. 创建与:hover边框匹配的transparent边框。
3. 使用使用框大小调整

检查下面的代码段，看看哪种代码段最适合您。

div {
width: 100px;
height: 100px;
background: black;
margin: 1em;
display: inline-block;
color: white;
text-align: center;
}
div:hover {
border: 2px solid green;
}
.one {
/* ...Nothing here...move along...*/
}
.two {
border: 2px solid transparent
}
.three {
box-sizing: border-box
}

<div class="one">default</div>
<div class="two">transparent</div>
<div class="three">box-sizing</div>

Answer 5

您可以使用大纲 CSS 属性。它具有与border相同的语法和出色的跨浏览器支持(IE8+(。演示：

.inner:hover {
outline: 5px solid red;
}
/* just styles for demo */
.inner {
padding: 10px;
border: 2px dotted gray;
}

<div class="outer">
Some outer div
<div class="inner">
Some inner div
</div>
Some outer div
</div>