html - 带有 z 索引的 div 中的图像

Question

这是我的代码:

<div class='f-left vignetteFamille box-sizing'>
    <div class='relative contenuVignetteFamille box-sizing' style='z-index:1;'>
        <br/><br/><br/><br/>
        <img class='absolute' src='./charte/famille/fondBasGaucheVignetteFamille' style='bottom:-21px;left:-4px;z-index:0;'>
    </div>
</div>

我想让我的 div contenuVignetteFamille 悬停在图像上，但这不起作用，我也不知道为什么

编辑:

有我的CSS，但我不知道是否对你有帮助:

.vignetteFamille{background-image:url('./charte/famille/fondVignetteFamille.png'); background-repeat:no-repeat;background-position:bottom right;margin-right:16px;width:201px;margin-top:2px;padding-bottom:19px;padding-right:19px;}
.contenuVignetteFamille{width:100%;border:solid 4px #FFC600;}

Answer 1

我不确定我是否正确理解了你的问题，但我假设你想在悬停 div contenuVignetteFamille 时突出显示图像？

这可以通过在悬停父级时向子级添加 css 来解决，如下所示:

.contenuVignetteFamille:hover img {
    opacity: 0.5;
}

See my fiddle here.

另外请注意，不要使用 br 标签在您的 div 上获得一些高度，而是添加一个 height 值。我还将您的内联样式移到了外部样式。