將鼠標懸停在父元素上時隱藏圖像

Question

我目前正在嘗試使圖像opacity: 0鼠標懸停在其所在的div上時，該值為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

您只需要像這樣的簡單內容：

小提琴

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 { ... } 。

Answer 2

你可以試試這個

.Test:hover .fadeSponsorsSmall{
    opacity: 0;
}

然后，當您將鼠標懸停在具有Test類的div上時，具有fadeSponsorsSmall類的div的不透明度將為0。

您也可以使用fadeSponsorsSmall類刪除div，為照片提供一個ID並以此作為目標。

Answer 3

只需更改此CSS

.fadeSponsorsSmall:hover img
{
    opacity: 0;
}

Answer 4

嘗試使用

.Test:hover {
    opacity: 0;
}

Answer 5

只需將其添加到您的CSS

.Test:hover
{
    opacity: 0;
}