Html 堆叠div需要活动的z索引悬停状态

如果你看我的页面，你可以看到堆叠的div。它们向左浮动，右边缘为负。当你将鼠标悬停在它们上面时，它们会被赋予一个100的z-索引，使它们位于堆栈的顶部。但是，当您从左向右移动时，您会注意到开始堆栈的那一列仍然位于悬停的那一列的正后方，因此您先前悬停的那一列会落在堆栈的后面，使其右列或左列不可见

我解决这个问题的想法是给每一张活动卡一个99的z索引，同时让卡处于正常状态z索引98。但是，它不起作用：-

你有什么办法来解决我的困境吗

.card {
margin-right:-670px;
float:left;
width:700px;
height:500px;
background:#EEE;
-moz-box-shadow: 2px 2px 2px 2px #000;
-webkit-box-shadow: 2px 2px 2px 2px #000;
position:relative;
z-index:98;
}

.card:visited {
z-index:99;
}

.card:hover {
z-index:100;
}

编辑：

这就是我的最终产品的样子。谢谢你的建议，但这些都不是很好的答案

---

您知道当前正在单击active Translations to，对吗

---

我看不出没有jquery或javascript怎么能实现您想要的功能。

如果采用不同的方法，您可能会获得更好的成功

让你的卡片像你已经做的那样适合作为背景在瘦div中，但也有完整的卡片可见性：隐藏在相同的位置。将鼠标悬停在卡片边缘上，并将关联的完整卡片的可见性更改为“显示”。鼠标关闭，可见性再次隐藏

---

试图将它们堆叠起来，使它们都可见，等等，这是自找麻烦的：

请参阅，以获得一种无js的方式来实现您的目标。我同意zagnut的观点，用这些图像作为你的div的背景，寻找一种实现这一点的方法。我还建议您对html进行全面清理

谢谢！我知道我一团糟这个演示很好，但却违背了我设计的目的：原因是它们是动态发布的，这是Tumblr的主题。这意味着我不能解释单独的卡。同样在音频帖子中，如果看不到音频，音频将停止在帖子上播放，谁想在同一帖子上坐上3-4分钟以上？PlusOk然后尝试按z-索引顺序堆叠它们：99、100、101等。使所选的一个高于其余的一个。您只需要保持原始的z索引顺序。可以在这种情况下提供帮助。