css - 按钮的悬停效果与 Logo 的一部分重叠

Question

编辑 更改了文本以更好地反射(reflect)问题。

对于现场演示，您可以在此处查看网站:http://wow-klickers.de/ (我修改了这里的CSS，可能会解决问题。)

所以我有以下场景。我的网站包含一个导航栏，在上图中包含一个“论坛”按钮，上面有一个 Logo 。如果我越过按钮，悬停效果会隐藏延伸到按钮中的 Logo 部分。我想将鼠标悬停在按钮上但不隐藏 Logo 部分。

这是我的代码片段:

<h1 id="logo"> // the blue box of the 2. picture
  <a href="/"></a> // the blue box of the 1. picture
</h1>

CSS 内容:

#logo a {
  width: 275px;
  height: 126px;
  display: block;
  position: relative;
  bottom: 18px; // added here
}

h1#logo {
  margin: 0;
  position: relative;
  left: 85px;
  top: 6px;
  background: url("images/logo.png") no-repeat;
  width: 275px;
  display: block;
  z-index: 2; // changed here
  height: 126px; // added here
}

#primary-menu-bar li a, #primary-menu-bar ul.menu li a {
  display: block;
  white-space: nowrap;
  height: 37px;
  line-height: 29px;
  position: relative;
  z-index: 1;
}

编辑 我尝试使用填充或边距，但使用边距我的 Logo 被切断，但 Logo 应该覆盖在按钮上。填充不起作用..

Answer 1

将z-index:10添加到h1#logo，而不仅仅是在里面的a标签上。