对于一个网站,我想在一张桌子上显示一些图片,但因为其中一些是股票照片,所以我需要一个来源.我希望在用户将鼠标悬停在图片上时显示源.所以我把源标签放在一个类(.PicSource)中并给它{opacity 0; 转换所有.2s轻松}并悬停在图片上(.ServPic).ServPic:hover + .PicSource {opacity:1}.但它没有显示源文本,我不知道为什么.其他悬停事件工作正常.我在悬停时使用相同的东西来隐藏Caption,并且一切都很好.
所以这里是一个示例代码(它应该将.PicSource的不透明度更改为1,但它不会,所以你可以手动更改它以查看它)
.ServPic {
width: 350px;
height: 275px;
opacity: 0.5;
transition: opacity .2s ease-in;
}
.PicCapt {
position: absolute;
top: 0px;
left: 0px;
opacity: 1;
transition: opacity .2s ease-in;
}
.PicSource {
position: absolute;
top: 0%;
left: 20%;
opacity: 0;
color : #000000;
transition: all .2s ease-in;
}
.ServPic:hover {
opacity: 1;
}
.ServPic:hover+.PicCapt {
opacity: 0;
}
.ServPic:hover+.PicSource {
opacity: 1;
}<table>
<tr>
<td>
<div>
<img class="ServPic" src="https://cdn.lrb.co.uk/blog/wp-content/uploads/2014/03/Lorem_Ipsum.jpg">
<a class="PicCapt">CAPTION</a>
<a class="PicSource">SOURCE.COM</a>
</div> …