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

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

保持原样（不！）
创建与transparent边框匹配的:hover边框。
使用Use box-sizing

检查下面的代码段，了解哪种方法最适合您。

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

您可以使用outline 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>

由于边界，可变高度div在悬停时不期望地改变尺寸

5 个答案: