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

发布于 2024-12-23 13:56:56 字数 683 浏览 0 评论 0原文

如果您查看我的页面位于此处，您可以看到堆叠的 div。它们向左浮动并具有负的右边距。当您将鼠标悬停在它们上方时，它们的 z 索引将为 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;
}

编辑：

这就是我的最终产品的样子，谢谢您的建议，但它们并不是答案

。此处描述>

原文

If you look at my page located here you can see the stacked divs. They are floated to the left and have a negative right margin. Whe you hover over them they are given a z-index of 100 bringing them to the top of the stack. However, when you go from left to right you notice that the one that had began the stack is still right behind the hovered one, so the one you had hovered over previously falls behind the stack, making it's right or left column invisible.

My idea to solve this was to give each "active" card a z-index of 99 while having the cards in their normal state z-index 98. However, it's not working :-(

Do you have any ideas to solve my dilemma?

.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;
}

Edit:

This is what my end product will look like. Thank you for the suggestions, but they aren't quite answers.

enter image description here