Question

当我将鼠标悬停在第一个（左上角）上时，我无法理解为什么盒子会移动。我已经将框大小设置为边框，因此悬停时添加的边框不会影响效果，而只会在第一个框上发生。请帮忙！

JS小提琴here.

* {
  box-sizing: border-box !important;
}

body{
    font-family: Arial, Helvetica, sans-serif;
}

#gameArea {
  width: 700px;
  margin: 0 auto;
}

h1{
    text-align: center;
}

.card {
  float: left;
  margin: 10px;
    padding: 20px;
  background: lightblue;
  text-align: center;
  border-radius: 5px;
  box-shadow: 10px 10px 10px #ccc;
}

.hidden{
    display: none;
}

.card:hover {
  cursor: pointer;
  border: 3px solid blue;
}

.card p {
  font-size: 48px;
  color: blue;
}

img {
    width: 250px;
    height: 188px;
    vertical-align: middle;
}

.helper {
    display: inline-block;
    height: 100%;
    vertical-align: middle;
        margin:0;
}

Answer 1

这是因为边框宽度会增加元素的宽度，因此当在悬停时向元素添加额外宽度时，它将改变正常的布局流程。

您可以通过在静态状态下添加3px透明边框轻松修复它：

.card { border: 3px solid transparent; }

jsFiddle fork：https://jsfiddle.net/azizn/pL2j0zu5/

添加边框时CSS Divs跳跃

1 个答案: