堆積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懸停狀態

回答

相關問題