部門不來：Z指數

我使用下面的代碼，但.under是不是上升（並掩蓋）#portfolio_content .img img，因爲它應該在hover。部門不來：Z指數

#portfolio_wrap { 
    overflow:hidden; 
    width:980px; 
    float:left 
} 
#portfolio_content { 
    float:left; 
    clear:both; 
    margin:0 auto; 
    overflow:hidden; 
    width:650px!important 
} 
#portfolio_content ul { 
    list-style:none 
} 
#portfolio_content .img a { } 
#portfolio_content .img a:hover { } 
#portfolio_content .img { 
    display:block; 
    float:left; 
    height:210px; 
    margin:0 35px 35px 0!important; 
    overflow:hidden; 
    padding:0; 
    width:307px 
} 
#portfolio_content .img img { 
    display:block; 
    position:absolute!important; 
    overflow:hidden; 
    z-index:3!important 
} 
#portfolio_content .img .title, #portfolio_content .img .title a { 
    font-size:22px; 
    margin:100px 0 10px 0; 
    float:left!important; 
    width:307px; 
    text-align:center; 
    position:relative 
} 
.desc { 
    font-size:13px; 
    display:block; 
    text-align:center!important; 
    margin:0 auto!important; 
    width:307px 
} 
.under { 
    z-index:2!important; 
    display:inline; 
    position:absolute; 
    width:307px; 
    height:210px 
} 
.under:hover { z-index:4!important }

有什麼想法？我認爲這與z-index有關，但我不知道我做錯了什麼。

來源

2011-12-12 siouxfan45

對不起，我看是不是這樣=） – Cyclonecode

你可以發佈你的HTML？謝謝。 – paislee

創建[jsFiddle]（http://jsfiddle.net/）可能會有幫助。 –

沒有看到的頁面呈現，我將不得不承擔的問題是，你不能真正在.under（z-index:2）懸停，因爲它是根據#portfolio_content .img img（z-index:3）隱藏最初，因此，你也只是徘徊在img代替。

來源

2011-12-12 21:10:21 tw16

也ID類元素比類，idk更高的特定性如果@ TW16也這樣說，但是這將重寫一個簡單的類聲明 – albert

你不能將鼠標懸停在.under之上，因爲它總是在你的圖片下面，tw16是正確的。

，而不是與Z-指標玩，儘量實際放置.under內.img但對圖片的頂部，並與display:none，然後像做：

.img:hover .under{ 
    display:block; 
}

我可以補充你的標記是不太優化.img應直接放在a標籤，而不是無用的內部span s，這是waaaay太多反正:)

編輯：（如答案評論）

如果沒有圖像顯示，您的標記將會有所不同（因爲我假設由服務器端腳本生成，如php），就像有一個要顯示的那樣（例如，您不會回顯img標籤）。您可以和使用條件寫2型動物類，例如.img和.no-img：

.no-img .under{ 
    display:block; 
} 

.img .under{ 
    display:none; 
} 

.img:hover .under{ 
    display:block; 
}

來源

2011-12-12 22:11:45 darma

這個解決方案的問題是我仍然需要標題來顯示，當沒有一張圖片（http://themeforward.com/demo2/portfolio/）。感謝您指出跨度，修復它。 – siouxfan45

部門不來：Z指數

回答

相關問題