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

Question

如果您查看此处的我的页面，则可以看到堆叠的div。 它们浮动在左边，右边距为负。 当您将鼠标悬停在它们上方时，它们的z索引为100，将它们带到堆栈的顶部。 但是，当您从左向右移动时，您会注意到开始堆栈的那一列仍在悬停的那一列的后面，因此，您先前悬停的那一列会落在该堆栈的后面，从而使其左右列都不可见。

解决这个问题的我的想法是让每个“活动”卡的z-index为99，而卡的正常状态为z-index98。但是，它不起作用:-(

您有什么办法解决我的难题吗？

.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

请参阅此处以获取实现所需内容的js免费方法。 我同意zagnut关于将图像用作div的背景的观点， 以此来实现这一目标。 我也建议您对html进行一般清理