css - div 框在悬停时晃动答案

【问题标题】：css - div boxes are shaking on hovercss - div 框在悬停时晃动
【发布时间】：2017-01-21 21:11:39
【问题描述】：

我的 css 有问题 - 我希望 div 在悬停时平滑过渡 0.3 秒，其他 div 保持原样。 div 排成一行，每当我将鼠标悬停在 div 的右侧（2、4、6 - 在 jsfiddle 中）时，下一行 div 都会晃动。我已经尝试并推荐了许多网站来修复它。你能帮我解决这个问题吗？

此代码在 safari 上运行良好。但是，不是在其他浏览器上。

#datelist {
  background-color: white;
  width: calc(80% - 25px);
  display: inline-block;
  margin: 7.5px 0px 7.5px 5px;
  border-radius: 5px;
  padding: 7.5px;
  text-align: center;
}
.displaydate {
  width: calc(50% - 32px);
  height: 35vw;
  background-color: #fafeff;
  color: #05336D;
  font-size: 1.1vw;
  font-family: 'Roboto', sans-serif;
  display: inline-block;
  z-index: 9;
  float: left;
  margin: 10px;
  padding: 5px;
  border: 1px #bce6fb solid;
  border-radius: 0.75vw;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.displaydate:hover {
  background-color: #00AADC;
  color: white;
  border-color: #00AADC;
  width: calc(50% - 12px);
  height: calc(35vw + 20px);
  margin: 0px;
  overflow: inherit;
  z-index: 10;
  font-size: 1.15vw;
  box-shadow: 0px 7.5px 7.5px #93AAB6;
}

<div id="datelist">
  <div class="displaydate">1</div>
  <div class="displaydate">2</div>
  <div class="displaydate">3</div>
  <div class="displaydate">4</div>
  <div class="displaydate">5</div>
  <div class="displaydate">6</div>
</div>

谢谢，阿洛奇

【问题讨论】：

为什么不在悬停时使用这个 CSS：transform: scale(1.1);
更改悬停时的大小会导致元素从光标下方移出。

标签： html css hover

【解决方案1】：

不要同时使用display: inline-block 和float: left。它只会把事情搞砸。

我还强烈建议您在使用填充时使用* { border-box: box-sizing; }。这对你有很大帮助。

还有。当你使用 inline-block 时，我建议你使用vertical-align: top，这样元素总是可以完美对齐。

所以要解决您的问题；删除float: left 并添加上面的代码。那么它应该可以工作了。

我已经修改了您现有的代码，所以它现在可以正常工作了。

* {
  box-sizing: border-box;
}

#datelist {
  background-color: white;
  width: calc(80% - 25px);
  display: inline-block;
  margin: 7.5px 0px 7.5px 5px;
  border-radius: 5px;
  padding: 7.5px;
  text-align: center;
}
.displaydate {
  display: inline-block;
  width: calc(50% - 32px);
  height: 35vw;
  background-color: #fafeff;
  color: #05336D;
  font-size: 1.1vw;
  font-family: 'Roboto', sans-serif;
  z-index: 9;
  margin: 10px;
  padding: 5px;
  border: 1px #bce6fb solid;
  border-radius: 0.75vw;
  vertical-align: top;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.displaydate:hover {
  background-color: #00AADC;
  color: white;
  border-color: #00AADC;
  width: calc(50% - 12px);
  height: calc(35vw + 20px);
  margin: 0px;
  overflow: inherit;
  z-index: 10;
  font-size: 1.15vw;
  box-shadow: 0px 7.5px 7.5px #93AAB6;
}

<div id="datelist">
  <div class="displaydate">1</div>
  <div class="displaydate">2</div>
  <div class="displaydate">3</div>
  <div class="displaydate">4</div>
  <div class="displaydate">5</div>
  <div class="displaydate">6</div>
</div>

【讨论】：