Question

我首先要说的是我没有非常有经验，所以我确定我的代码不是很干净＆＃34; ： - ）

我正在谈论的页面可以在这里查看：

CSS链接：

无论如何：我正在尝试构建一个响应式菜单，其中包含几个图像按钮，这些按钮在悬停时会发生变化。但是，我发现悬停/链接只会在悬停在前30％的按钮上时发生。徘徊在该阈值以下的按钮上，它就会消失。

当屏幕变得太小时，有一个媒体查询将两行上的按钮分开，但有趣的是，两行仍然表现出相同的问题（例如，不是只有顶行的前30％工作）

从搜索类似的SO问题我怀疑与重叠的div存在冲突，但对于我的生活，我无法弄清楚问题所在。任何人都可以帮我这个吗？

另一个问题可能很简单，但我似乎无法解决这个问题。如上所述，在较小的屏幕上，菜单变为两行。我想将底行靠近顶部，但我无法实现。我应该在元素中使用的正确定位组合是什么？

我希望我不要求太多！

Answer 1

你的图像的高度是0px，这就是为什么悬停只能在图像上工作。（甚至不是30％）。您应该设置高度或更改行高属性（在您的情况下设置为非零值，例如：20px）

我又看了一下，发现你的锚都飘了。试着清除你的花车。这也应该有用

Answer 2

添加：line-height：12px样式到CSS文件中的#buttons选择器：

#buttons 
{ 
  line-height: 12px;
}

现在，他们设置为0px。改变它，它应该工作！