线之间不希望的悬停间隙答案

【问题标题】：Undesired hover gap between lines线之间不希望的悬停间隙
【发布时间】：2016-03-23 06:04:32
【问题描述】：

我有一个装满金色小方块的容器。在:hover 上，它们变成黑色。当鼠标悬停在一个正方形上并移动到左侧或右侧的下一个时，它可以正常工作。

问题是：当光标在一个方格上并转到另一个方格另一行时，:hover 效果上有一个间隙：一个区域他们都没有获得:hover 属性。

当鼠标在容器行中垂直移动时，如何避免在悬停时出现这种闪烁，为什么会发生这种情况？

#container {
  width: 200px;
  height: 90px;
  line-height: 10px;
  position: relative;
}

#container span {
  display: inline-block;
  width: 10px;
  height: 10px;
  background: gold;
  vertical-align: top;  
}

#container span:hover {
  background: black;  
}

#container span:hover ~ span {
  background: tomato;  
}

<div id=container>
<span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span>
</div>

【问题讨论】：

标签： html css hover

【解决方案1】：

容器上的 line-height 的罪魁祸首。删除它并将字体大小设置为零：

#container {
  width: 200px;
  height: 90px;
  position: relative;
  font-size:0;
}
#container span {
  display: inline-block;
  width: 10px;
  height: 10px;
  background: gold;
  vertical-align: top;
}
#container span:hover {
  background: black;
}
#container span:hover ~ span {
  background: tomato;
}

<div id=container>
  <span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span>
</div>

【讨论】：

1- 感谢您的回答。 2- 我在完整版本（不是最小示例）上遇到问题。正如您在codepen link 上看到的那样，它应该是这个按钮中间的一个文本，但它没有显示出来，我猜这是因为父母的font-size:0。如何为内部元素设置不同的字体大小？
你可以在最后一个 div 上设置字体大小，但它也没有高度。
我确实用这个问题打开了a question；
找到的解决方案是使用px 而不是em，因为em 字体大小与其父字体大小有关（例如，两倍零等于零）。跨度>

【解决方案2】：

你能从display:inline-block;切换到display:block; float:left;吗？

#container {
  width: 200px;
  height: 90px;
  line-height: 10px;
  position: relative;
}

#container span {
  display: block;
  float: left;
  width: 10px;
  height: 10px;
  background: gold;
  vertical-align: top;  
}

#container span:hover {
  background: black;  
}

#container span:hover ~ span {
  background: tomato;  
}

<div id=container>
<span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span>
</div>

【讨论】：

另一个答案被检查为“正确的”，因为它通过对当前最小示例的较小更改修复了 OP 问题。但是，在完整的场景中（我在 div 中也有文本，而不是在 OP 上共享）你的效果更好。所以非常感谢您的帖子；