一个元素的边距遮挡了另一个元素的悬停状态
Margin from one element obscuring hover state of another
我有一个基于 Flexbox 的导航菜单，其徽标与内联 link 的水平中心对齐。由于某种原因，我尝试制作的每支笔或 fiddle 都没有复制我得到的东西，但你可以去 to this Flexbox test here 这几乎正是我正在工作的，如果你进入检查员并在主徽标图像上添加一个锚点，您就会明白我的意思。
设置方式是第三个 link 应用了 auto 的左边距以填充徽标适合的额外空白。徽标区域与导航菜单分开标记，但 flexbox 布局使它们彼此对齐（在较低的断点处，导航菜单向下移动）。
现在这一切都很好，直到您决定将徽标设为可点击 link。当您这样做时，第三个 link 的边距会掩盖徽标的悬停状态。
这是一个直观的例子：
因此，如果您尝试将鼠标悬停在边缘区域与其相交的徽标上，您将无法单击该徽标，也无法获得指针光标或任何悬停状态（如背景更改）。在徽标上方的边距之外，它工作正常，但对于用户来说，他们会认为发生了一些奇怪的事情。如果徽标是 img（如在原始示例中）或 SVG（如我尝试使用的那样），则会发生这种情况。
尝试查看是否有解决此问题的方法，而不必完全破坏我的 Flexbox 布局。我的标记与该示例中使用的标记非常相似。与 nav 相比，我尝试为徽标设置更高的 z-index，但没有用。给导航一个负的 z-index 可以让你点击标志，但你不能点击导航项目。
您可以为徽标添加相对位置，然后使用 z-index 使徽标成为第一个元素。
.logo {
position: relative;
z-index: 1;
}
我有一个基于 Flexbox 的导航菜单，其徽标与内联 link 的水平中心对齐。由于某种原因，我尝试制作的每支笔或 fiddle 都没有复制我得到的东西，但你可以去 to this Flexbox test here 这几乎正是我正在工作的，如果你进入检查员并在主徽标图像上添加一个锚点，您就会明白我的意思。
设置方式是第三个 link 应用了 auto 的左边距以填充徽标适合的额外空白。徽标区域与导航菜单分开标记，但 flexbox 布局使它们彼此对齐（在较低的断点处，导航菜单向下移动）。
现在这一切都很好，直到您决定将徽标设为可点击 link。当您这样做时，第三个 link 的边距会掩盖徽标的悬停状态。
这是一个直观的例子：
因此，如果您尝试将鼠标悬停在边缘区域与其相交的徽标上，您将无法单击该徽标，也无法获得指针光标或任何悬停状态（如背景更改）。在徽标上方的边距之外，它工作正常，但对于用户来说，他们会认为发生了一些奇怪的事情。如果徽标是 img（如在原始示例中）或 SVG（如我尝试使用的那样），则会发生这种情况。
尝试查看是否有解决此问题的方法，而不必完全破坏我的 Flexbox 布局。我的标记与该示例中使用的标记非常相似。与 nav 相比，我尝试为徽标设置更高的 z-index，但没有用。给导航一个负的 z-index 可以让你点击标志，但你不能点击导航项目。
您可以为徽标添加相对位置，然后使用 z-index 使徽标成为第一个元素。
.logo {
position: relative;
z-index: 1;
}