堆积divs需要积极的Z-index悬停状态

如果你看我的页面located here你可以看到堆叠的div。他们漂浮在左边并具有负右边缘。当你将鼠标悬停在他们身上时，他们会得到一个100的z-索引，将它们带到栈顶。然而，当你从左到右走时，你注意到已经开始堆栈的那个仍然在被徘徊的那个后面，所以你之前徘徊过的那个先前落在堆栈后面，使得它的右列或左列不可见。堆积divs需要积极的Z-index悬停状态

我的想法来解决这个问题是给每个“活动”卡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; 
}

编辑：。

这是我的最终产品将是什么样子谢谢你的建议，但他们都不太答案

enter image description here

来源

2011-12-28 Earl Larson

你意识到“主动”翻译为“正在被点击”，对吗？

我不明白如何在没有jquery或javascript的情况下完成你想要的东西。

来源

2011-12-28 00:34:52 Scott

oops〜我很愚蠢〜对不起〜:(节日快乐！ – 2011-12-28 05:41:38

用不同的方法你可能会有更好的成功。

将您的卡片作为背景放在细格区域内，就像您已经做过的一样，但也具有完整的卡片可见性：隐藏在相同位置。将鼠标悬停在卡片边缘并更改可见性以显示相关的完整卡片。鼠标关闭并且可见性再次隐藏。

试图堆叠起来让他们所有可见等乞求麻烦:)

来源

2011-12-28 00:38:58 ZagNut

原因是他们是动态发布的，这是Tumblr的一个主题，这意味着我无法解释单独的卡片。在音频文章中，如果它不可见，音频退出在帖子上播放，谁想要坐在相同的职位上3-4分钟？Plus – 2011-12-28 05:43:29

好吧，然后尝试按顺序堆叠它们z-index：99,100 ，101等等。让选中的一个比其他的更高，你只需要保持原始的z-index顺序[查找最上面的z-index]（http://stackoverflow.com/questions/4755631/css -javascript-make-element-top-most-z-index-top-most-modal-element）可以在这种情况下提供帮助。 – ZagNut 2011-12-29 02:50:20

为achieveing你想要的东西的一个js自由的方式请参见here。我同意zagnut关于使用图像作为你的divs的背景看看this的方法来实现这一点。我也会推荐一个一般的清理你的html

来源

2011-12-28 01:09:17

Thankyou！我知道我很混乱：（ – 2011-12-28 05:42:04

演示很不错，但击败了我设计的目的:( – 2011-12-28 05:44:15

堆积divs需要积极的Z-index悬停状态

回答

相关问题