html - 将鼠标悬停在父元素上时隐藏图像

Question

每当我将鼠标悬停在图像所在的 div 上时，我目前正在尝试为图像赋予 opacity: 0。目前，仅当我将鼠标悬停在实际图像上时，不透明度才会应用于图像，而不是当我将鼠标悬停在父 div 上时。我当前的代码:

HTML

<div class="Test" style="background-color:#D12121;padding-top:10px;padding-bottom:5px;">
    <div class="fadeSponsorsSmall">
        <img src="img/icon/small/white/sponsors.png">
        <p style="color:white;"><b>Gastenboek</b></p>
    </div>
</div>

CSS

.fadeSponsorsSmall {
    background-image: url('../img/icon/small/black/sponsors.png');
    background-size: 50px 50px;
    background-repeat: no-repeat;
    background-position: 22px 0px;
}
.fadeSponsorsSmall img:hover {
    opacity: 0;
}

每当我将鼠标悬停在图像或任何具有 .test 类的东西上时，我都需要使图像的不透明度为 0。

Answer 1

你只需要像这样简单的东西:

fiddle

HTML

<div class="test">Hover over me!
    <img src="http://placekitten.com/g/200/300">
</div>

CSS

.test:hover img {
    opacity: 0;
}

自 <img>在<div>里面你只需要申请 :hover伪类到 div 并将样式应用于图像，因此 .test:hover img { ... } .