Html 我如何使元素保持悬停能力，但使点击通过它？

我试图制作一个框，当你将鼠标悬停在上面时，它会扩展成四个框（也是链接）。为此，我有5个盒子。一个用作父框并包含所有其他框，一个在悬停时展开，另外三个位于第二个框中的相对角。我的问题是，第二个框必须位于其他框的上方，悬停才能工作，但是用户不能单击它下面的按钮

以下是一个缩写版本（CSS然后是HTML）：

#侧边栏{
高度：100px；
宽度：100px；
职位：相对
}
#侧边栏#容器{
高度：100px；
宽度：100px；
过渡：所有2；
}
#侧边栏#容器：悬停{
高度：200px；
宽度：200px；
}
#侧边栏#容器#按钮1{
高度：100px；
宽度：100px；
位置：绝对位置；
右：0；
z指数：-1；
}
/*重复上述步骤，将两个按钮放置在底角*/

除了CSS和HTML，我不想使用任何东西，但如果这是唯一的方法，我会接受它

---

编辑：我用idrumgood的解决方案修复了JSFIDLE。

您可以通过将元素的css

指针事件设置为“无”来允许单击通过元素

#the_invisible_object{
  pointer-events: none;
}

是你的负z指数导致了这个问题。这使它落后于其他一切。
您需要将此样式添加到链接中：

a{
    display:inline-block;    
}

并调整第二个链接的大小。试试看，告诉我！：）
 您可以将悬停效果添加到侧边栏，更改按钮的可见性，以及删除z索引

一般来说，这是正确的，但是它不适用于所讨论的代码。我知道，在这种情况下，鼠标悬停动画需要指针事件。负z索引是将按钮“放在”其他所有按钮之后，以便在整个内容被压缩时看不到它们。尽管我可能会将侧边栏放在容器中，并将其z索引放在其他索引之上。FacePalm对错过这样一个简单的解决方案表示不满，但当你将鼠标移离它而不是平滑过渡时，这会造成令人不快的“抓拍”。
a{
    display:inline-block;    
}

#container a div{visibility:hidden;}
#sidebar:hover #container a div{visibility:visible;}