堆叠的 div 需要活动的 z-index 悬停状态

Question

如果您查看我的页面located here，您可以看到堆叠的 div。它们向左浮动并具有负的右边距。当您将鼠标悬停在它们上方时，它们的 z-index 为 100，将它们带到堆栈的顶部。但是，当您从左到右移动时，您会注意到开始堆栈的那个仍然在悬停的那个后面，所以您之前悬停的那个落在了堆栈的后面，使它的右列或左列不可见。

我解决这个问题的想法是让每张“活动”卡片的 z-index 为 99，同时让卡片处于正常状态 z-index 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;
}

编辑：

这就是我的最终产品的样子。感谢您的建议，但它们并不是完全正确的答案。

Answer 1

您意识到“活动”转换为“当前正在被点击”，对吧？

如果没有 jquery 或 javascript，我不知道如何完成你想要的。

Answer 2

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

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

试图堆叠它们以保持它们全部可见等是在自找麻烦 :)

Answer 3

请参阅here 以获取实现所需内容的免费 js 方式。我同意 zagnut 关于将图像用作 div 的背景的观点，请查看 this 以了解实现该目标的方法。我还建议对您的 html 进行一般清理