fiddle

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

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;
}

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

5 个答案:

fiddle