Question

我正在使用下面的代码，但.under并未升级（并覆盖）#portfolio_content .img img，因为它应该在hover上。

#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有关，但我不知道我做错了什么。

Answer 1

如果没有看到呈现的页面，我将不得不假设问题是您实际上不能将鼠标悬停在.under（z-index:2）上，因为它隐藏在#portfolio_content .img img下面{{1}最初，因此你只需要转移z-index:3而不是。

Answer 2

你不能将鼠标悬停在.under上，因为它总是在你的图片下面，tw16是对的。

请尝试将.under放在.img内，而是放在图片上并使用display:none，然后执行以下操作，而不是使用z-index;

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

我可能会添加您的标记并未进行相当优化，而.img应该直接放在a标记上，而不是放在span内无用的内容中，这些内容无论如何都太多了：）

修改（作为评论的回答）

如果没有要显示的图像，你的标记会有所不同（因为我认为是由服务器端脚本生成的，比如php），就像有一个要显示的那样（例如你不会回显{{1 }} 标签）。您也可以使用该条件来编写2个不同的类，例如img和.img：

.no-img

Div没有来到前面：Z-Index

2 个答案: