Css 按钮的悬停效果与徽标部分重叠

编辑更改了文本以更好地反映问题

对于live demo，您可以在此处看到网站：（我修改了此处的CSS，可能是为了解决问题。）

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

以下是我的代码片段：

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

---

编辑我尝试使用填充或边距，但使用边距时，我的徽标被切断，但徽标应覆盖在按钮上。而且填充不起作用。

将

z-index:10

添加到

h1#logo

，而不仅仅是添加到

a

标签中。

共享导航的标记，以及这些元素的css。或者可以在JSFIDLE中放置整个徽标+导航区域？我认为你的z指数规则需要改变。您正在将徽标（z索引2）放置在导航（z索引1）的顶部。我需要用你的markupI测试我最好分享一下这个网站。。easierLive网站对我来说很好（使用Chrome）是的，但按钮的悬停效果与延伸到按钮中的徽标部分重叠，这不应该起作用，因为徽标会模糊锚的点击区域，除非他想使用

指针事件：无

，这在IE 10和以下版本中不起作用。@rgthree，是的，按钮的顶部将链接到主页。唯一真正的解决办法是，如果他改变按钮，使其包含部分徽标，徽标高度也会改变。是的，但我想按下整个按钮，而不仅仅是按钮的底部。如果我按下图标延伸到的按钮，我会点击图标的链接，但它仍然应该是按钮的链接。我希望这是清楚的，sryconfusing@Michael，这是行不通的，

z-index

也行不通的，因为如果您想让徽标位于导航图像上方，然后，导航链接的一部分将被徽标和主页链接遮挡。@Nick R因此，最好的方法是制作一幅完整的图像，将徽标集成到导航栏中，然后创建链接区域。遗憾的是，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;
}