[英]Hide image when hovering over a parent element
I am currently trying to give an image an opacity: 0
whenever I hover over the div in which it is located. 我目前正在尝试使图像
opacity: 0
鼠标悬停在其所在的div上时,该值为0。 Currently, the opacity is only applied to the image when I hover over the actual image, not when I hover over the parent div. 当前,不透明度仅在我将鼠标悬停在实际图像上时才应用于图像,而在我将鼠标悬停在父div上时不应用。 My current code:
我当前的代码:
HTML 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 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;
}
I need to make the image have an opacity of 0 whenever I hover over either the image or anything with a class of .test
. 每当将鼠标悬停在图像或任何带有
.test
类的图像上时,都需要使图像的不透明度为0。
You just need something simple like this: 您只需要像这样的简单内容:
HTML HTML
<div class="test">Hover over me!
<img src="http://placekitten.com/g/200/300">
</div>
CSS CSS
.test:hover img {
opacity: 0;
}
Since the <img>
is inside of the <div>
you just need to apply the :hover
pseudo class to the div and apply the style to the image, hence .test:hover img { ... }
. 由于
<img>
在<div>
内部,您只需要将:hover
伪类应用于div并将样式应用于图像,因此.test:hover img { ... }
。
You can try this 你可以试试这个
.Test:hover .fadeSponsorsSmall{
opacity: 0;
}
Then when you hover over the div with the class of Test, the opacity of the div with the class of fadeSponsorsSmall will be 0. 然后,当您将鼠标悬停在具有Test类的div上时,具有fadeSponsorsSmall类的div的不透明度将为0。
You could also remove div with the class of fadeSponsorsSmall, give the photo an id and target that instead. 您也可以使用fadeSponsorsSmall类删除div,为照片提供一个ID并以此作为目标。
Just change your CSS with this one 只需更改此CSS
.fadeSponsorsSmall:hover img
{
opacity: 0;
}
Try using 尝试使用
.Test:hover {
opacity: 0;
}
Just add this to your CSS 只需将其添加到您的CSS
.Test:hover
{
opacity: 0;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.