html - 隐形覆盖 DIV 阻塞悬停？ +定位

Question

首先我会说我不是很有经验，所以我确定我的代码不是很“干净”:-)

我说的页面可以在这里查看:

http://www.fordesignpurposes.com/so/00menu.html

CSS 链接:

http://www.fordesignpurposes.com/so/style.css

无论如何:我正在尝试构建一个响应式菜单，其中包含几个在悬停时会发生变化的图像按钮。但是，我发现悬停/链接只会在悬停在按钮的前 30% 上方时出现。将鼠标悬停在该阈值以下的按钮上，它就会停止运行。

一旦屏幕变得太小，有一个媒体查询将两行的按钮分开，但有趣的是两行仍然出现相同的问题(而不是只有前 30% 的顶行工作，例如) .

通过搜索类似的 SO 问题，我怀疑与覆盖的 div 存在冲突，但就我的生活而言，我无法弄清楚问题出在哪里。谁能帮我解决这个问题？

另一个问题可能非常简单，但我似乎也无法弄清楚。正如我上面提到的，在较小的屏幕上，菜单变为两行。我想将底行移到靠近顶部的位置，但我做不到。为此，我应该在元素中使用什么正确的定位组合？

希望我没有要求太多!

Answer 1

目前您的图像高度为 0 像素，这就是悬停仅在图像顶部有效的原因。(甚至不到 30%)。 您应该设置 height 或更改 line-height 属性(例如设置为非零值:在您的情况下为 20px)

我又看了一眼，发现你的 anchor 是 float 的。尝试清除您的花车。那也应该有效