Question

我有一个无序列表显示一堆徽标作为块。当用户将鼠标悬停在任何徽标上时，我使用div来创建半透明叠加层，但在叠加层顶部，我想用一个按钮放置一些文本。

一切都运行正常，但当我将鼠标悬停在项目上时，文字看起来就像叠加在幕后。但是，如果我将叠加不透明度设置为1（不透明），则文本显示正常。该文本或文本采用叠加层的不透明度。

这是HTML：

<li class="portfolioElement pfe28">
    <div class="overlay"></div>
    <div class="portfolioMore">Click here for more information.</div>
    <div class="portfolioText">
            <h3 class="portfolioTitle">Company</h3>
        <p class="portfolioDescription">
        Description...
        </p>
        <p>Locations: Toronto - Canada, Brisbane - Australia</p>
        <p>Click here to see more</p>
    </div>
</li>

将类设置为portfolioMore的div应该显示在div overlay之上。

在半透明div上显示不透明div是否有任何已知问题？或者这是我的代码在某处的问题？

由于雅克

这是CSS：

.portfolioMore
{
    background: black url(Portfolio.png) -194px -704px;
    //height:46px;
    //width:46px;
    margin-left:0;
    margin-top:-65px;
    position:inherit;
    display:none;
    text-align:center;
    font-family:arial;
    font-size:9pt;
    color:white;
    opacity:1;
    -moz-opacity:1;

}

和第二个CSS部分：

.overlay
{
    background-color:#000;
    opacity:0;
    display:none;
}

Answer 1

尝试通过设置位置：相对两者并给出z-index来明确设置div的堆叠顺序：

.portfolioMore {
    position: relative;
    z-index: 2;
    /* other css declarations */
}

.overlay {
    position: relative;
    z-index: 1;
    /* other css declarations */
}

JQuery叠加不透明度和文本问题

1 个答案: