线之间不希望的悬停空白 [英] Undesired hover gap between lines

查看：84 发布时间：2018/6/12 19:28:54 html css hover

本文介绍了线之间不希望的悬停空白的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

问题在于 ：当光标位于正方形并转到另一行另一行上时，：hover 效果存在差距：他们获得：hover 属性。

如何避免鼠标移动时闪烁垂直横跨容器行，为什么会发生？

$ b

#container {width：200px;身高：90px; line-height：10px; position：relative;}＃container span {display：inline-block;宽度：10px; height：10px;背景：黄金; vertical-align：top; } #container span：hover {background：black; } #container span：hover〜span {background：tomato; }

< div id = container> < /跨度><跨度>< /跨度><跨度>< /跨度><跨度>< /跨度><跨度>< /跨度><跨度>< /跨度> <跨度>< /跨度><跨度>< /跨度><跨度>< /跨度><跨度>< /跨度><跨度>< /跨度><跨度>< ; /跨度><跨度>< /跨度><跨度>< /跨度><跨度>< /跨度><跨度>< /跨度><跨度>< /跨度>< ;跨度>< /跨度><跨度>< /跨度><跨度>< /跨度><跨度>< /跨度><跨度>< /跨度><跨度>< /跨度><跨度>< /跨度><跨度>< /跨度><跨度>< /跨度><跨度>< /跨度><跨度>< /跨度><跨度>< /跨度><跨度>< /跨度><跨度>< /跨度><跨度>< /跨度><跨度>< /跨度><跨度>< /跨度><跨度>< /跨度><跨度>< / s的平移><跨度>< /跨度><跨度>< /跨度><跨度>< /跨度><跨度>< /跨度><跨度>< /跨度><跨度> ;< /跨度><跨度>< /跨度><跨度>< /跨度><跨度>< /跨度><跨度>< /跨度><跨度>< /跨度> ;<跨度>< /跨度><跨度>< /跨度><跨度>< /跨度><跨度>< /跨度><跨度>< /跨度><跨度> < /跨度><跨度>< /跨度><跨度>< /跨度><跨度>< /跨度><跨度>< /跨度><跨度>< /跨度> <跨度>< /跨度><跨度>< /跨度><跨度>< /跨度><跨度>< /跨度><跨度>< /跨度><跨度>< ; /跨度><跨度>< /跨度><跨度>< /跨度><跨度>< /跨度><跨度>< /跨度><跨度>< /跨度>< ;跨度>< /跨度><跨度>< /跨度><跨度>< /跨度><跨度>< /跨度><跨度>< /跨度><跨度>< /跨度><跨度>< / s的平移><跨度>< /跨度><跨度>< /跨度><跨度>< /跨度><跨度>< /跨度><跨度>< /跨度><跨度> ;< /跨度><跨度>< /跨度><跨度>< /跨度><跨度>< /跨度><跨度>< /跨度><跨度>< /跨度> ;<跨度>< /跨度><跨度>< /跨度><跨度>< /跨度><跨度>< /跨度><跨度>< /跨度><跨度> < /跨度><跨度>< /跨度><跨度>< /跨度><跨度>< /跨度><跨度>< /跨度><跨度>< /跨度> <跨度>< /跨度><跨度>< /跨度><跨度>< /跨度><跨度>< /跨度><跨度>< /跨度><跨度>< ; /跨度><跨度>< /跨度><跨度>< /跨度><跨度>< /跨度><跨度>< /跨度><跨度>< /跨度>< ;跨度>< /跨度><跨度>< /跨度><跨度>< /跨度><跨度>< /跨度><跨度>< /跨度><跨度>< /跨度><跨度>< / s的平移><跨度>< /跨度><跨度>< /跨度><跨度>< /跨度><跨度>< /跨度><跨度>< /跨度><跨度> ;< /跨度><跨度>< /跨度><跨度>< /跨度><跨度>< /跨度><跨度>< /跨度><跨度>< /跨度> ;<跨度>< /跨度><跨度>< /跨度><跨度>< /跨度><跨度>< /跨度><跨度>< /跨度><跨度> < /跨度><跨度>< /跨度><跨度>< /跨度><跨度>< /跨度><跨度>< /跨度><跨度>< /跨度> <跨度>< /跨度><跨度>< /跨度><跨度>< /跨度><跨度>< /跨度><跨度>< /跨度><跨度>< ; /跨度><跨度>< /跨度><跨度>< /跨度><跨度>< /跨度><跨度>< /跨度><跨度>< /跨度>< ;跨度>< /跨度><跨度>< /跨度><跨度>< /跨度><跨度>< /跨度><跨度>< /跨度><跨度>< /跨度><跨度>< / s的平移><跨度>< /跨度><跨度>< /跨度><跨度>< /跨度><跨度>< /跨度><跨度>< /跨度><跨度> ;< /跨度><跨度>< /跨度><跨度>< /跨度><跨度>< /跨度><跨度>< /跨度><跨度>< /跨度> ;<跨度>< /跨度><跨度>< /跨度><跨度>< /跨度><跨度>< /跨度><跨度>< /跨度><跨度> < /跨度><跨度>< /跨度><跨度>< /跨度><跨度>< /跨度><跨度>< /跨度><跨度>< /跨度> < / div>
b $ b
解决方案
容器行高的罪魁祸首。删除它，而不是设置字体大小为零：
#container {width：200px;身高：90px;位置：相对; font-size：0;}＃container span {display：inline-block;宽度：10px; height：10px;背景：黄金; vertical-align：top;}＃container span：hover {background：black;}＃container span：hover〜span {background：tomato;} < div id = container> <跨度>< /跨度><跨度>< /跨度><跨度>< /跨度><跨度>< /跨度><跨度>< /跨度><跨度>< ; /跨度><跨度>< /跨度><跨度>< /跨度><跨度>< /跨度><跨度>< /跨度><跨度>< /跨度>< ;跨度>< /跨度><跨度>< /跨度><跨度>< /跨度><跨度>< /跨度><跨度>< /跨度><跨度>< /跨度><跨度>< /跨度><跨度>< /跨度><跨度>< /跨度><跨度>< /跨度><跨度>< /跨度><跨度>< /跨度><跨度>< /跨度><跨度>< /跨度><跨度>< /跨度><跨度>< /跨度><跨度>< /跨度><跨度>< /跨度><跨度>< /跨度><跨度>< /跨度><跨度>< /跨度><跨度>< /跨度><跨度> ;< /跨度><跨度>< /跨度><跨度>< /跨度><跨度>< /跨度><跨度>< /跨度><跨度>< /跨度> ;<跨度>< /跨度> <跨度>< /跨度><跨度>< /跨度><跨度>< /跨度><跨度>< /跨度><跨度>< /跨度><跨度>< ; /跨度><跨度>< /跨度><跨度>< /跨度><跨度>< /跨度><跨度>< /跨度><跨度>< /跨度>< ;跨度>< /跨度><跨度>< /跨度><跨度>< /跨度><跨度>< /跨度><跨度>< /跨度><跨度>< /跨度><跨度>< /跨度><跨度>< /跨度><跨度>< /跨度><跨度>< /跨度><跨度>< /跨度><跨度>< /跨度><跨度>< /跨度><跨度>< /跨度><跨度>< /跨度><跨度>< /跨度><跨度>< /跨度><跨度>< /跨度><跨度>< /跨度><跨度>< /跨度><跨度>< /跨度><跨度>< /跨度><跨度> ;< /跨度><跨度>< /跨度><跨度>< /跨度><跨度>< /跨度><跨度>< /跨度><跨度>< /跨度> ;<跨度>< /跨度> <跨度>< /跨度><跨度>< /跨度><跨度>< /跨度><跨度>< /跨度><跨度>< /跨度><跨度>< ; /跨度><跨度>< /跨度><跨度>< /跨度><跨度>< /跨度><跨度>< /跨度><跨度>< /跨度>< ;跨度>< /跨度><跨度>< /跨度><跨度>< /跨度><跨度>< /跨度><跨度>< /跨度><跨度>< /跨度><跨度>< /跨度><跨度>< /跨度><跨度>< /跨度><跨度>< /跨度><跨度>< /跨度><跨度>< /跨度><跨度>< /跨度><跨度>< /跨度><跨度>< /跨度><跨度>< /跨度><跨度>< /跨度><跨度>< /跨度><跨度>< /跨度><跨度>< /跨度><跨度>< /跨度><跨度>< /跨度><跨度> ;< /跨度><跨度>< /跨度><跨度>< /跨度><跨度>< /跨度><跨度>< /跨度><跨度>< /跨度> ;<跨度>< /跨度> <跨度>< /跨度><跨度>< /跨度><跨度>< /跨度><跨度>< /跨度><跨度>< /跨度><跨度>< ; /跨度><跨度>< /跨度><跨度>< /跨度><跨度>< /跨度><跨度>< /跨度><跨度>< /跨度>< ;跨度>< /跨度><跨度>< /跨度><跨度>< /跨度><跨度>< /跨度><跨度>< /跨度><跨度>< /跨度><跨度>< /跨度><跨度>< /跨度><跨度>< /跨度><跨度>< /跨度><跨度>< /跨度><跨度>< /跨度><跨度>< /跨度><跨度>< /跨度><跨度>< /跨度><跨度>< /跨度><跨度>< /跨度><跨度>< /跨度><跨度>< /跨度><跨度>< /跨度><跨度>< /跨度><跨度>< /跨度><跨度> ;< /跨度><跨度>< /跨度><跨度>< /跨度><跨度>< /跨度><跨度>< /跨度><跨度>< /跨度> ;<跨度>< /跨度> <跨度>< /跨度><跨度>< /跨度><跨度>< /跨度><跨度>< /跨度><跨度>< /跨度><跨度>< ; /跨度><跨度>< /跨度><跨度>< /跨度><跨度>< /跨度><跨度>< /跨度><跨度>< /跨度>< ;跨度>< /跨度><跨度>< /跨度><跨度>< /跨度><跨度>< /跨度><跨度>< /跨度><跨度>< /跨度><跨度>< /跨度><跨度>< /跨度><跨度>< /跨度>< / DIV> I have a container filled with little golden squares. On :hover, they become black. When the mouse is over a square and goes to the next one on the left or on the right side it works fine. The problem is: When the cursor is over a square and goes to another square on another row, there's a gap on the :hover effect: an area where none of them gets the :hover properties. How to avoid this flashing on hover when the mouse moves vertically across the container rows and why does it happens? codepen #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> </div> 解决方案 The culprit in the line-height on the container. Remove it and instead set the font-size to zero: #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> </div> 这篇关于线之间不希望的悬停空白的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文

线之间不希望的悬停空白 [英] Undesired hover gap between lines

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录关闭

线之间不希望的悬停空白 [英] Undesired hover gap between lines

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录 关闭

登录关闭