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

Question

如果您查看我的页面located here，您可以看到堆叠的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;
}

编辑：

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

​

​

Answer 1

你知道“活动”翻译成“当前正在被点击”，对吧？

我不明白如果没有jquery或javascript，怎么能实现你想要的东西。

Answer 2

就像你已经做的那样，让你的卡片适合作为薄div的背景，但也有完整的卡片可见性:隐藏在相同的位置。鼠标移开，可见性再次隐藏。

试图堆叠它们，使它们全部可见，等等都是在自找麻烦:)

Answer 3

请参阅here获取实现您想要的内容的js免费方法。我同意扎格努特关于使用图片作为你的div的背景的观点，看看this可以找到一种实现这一点的方法。我还建议对您的html进行全面清理。