堆叠的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

使用不同的方法可能会取得更大的成功。

让你的卡片在你的瘦身盘中适合作为背景，但也有完整的卡片可见度：隐藏在相同的位置。您将鼠标悬停在卡片边缘上并更改可见性以显示相关的完整卡片。鼠标关闭，可见性再次隐藏。

尝试堆叠它们使它们全部可见，等等是在乞求麻烦：）

Answer 3

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