html - 堆叠的 div 需要事件的 z-index 悬停状态

Question

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

我解决这个问题的想法是为每张“事件”卡片提供 99 的 z-index，同时让卡片处于正常状态 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，我看不出有什么方法可以完成你想要的。