部门不来：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指数

回答

相关问题