对于一个网站,我想在一个表中显示一些图片,但因为其中一些是库存照片,所以我需要一个来源。我希望在用户悬停在图片上时显示源代码。所以我把源标记放在一个类(.PicSource)中,并给它{opacity 0;transition all.2s ease in},同时悬停在图片(.ServPic)上。ServPic:hover+.PicSource{opacity:1}。
但它没有显示源代码,我不知道为什么。其他悬停事件工作正常。我用同样的方法在悬停时隐藏字幕,一切都很好。
所以这里有一个示例代码(它应该将.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>
</td>
</tr>
</table>
最佳答案
“+”slector用于直接兄弟级。使用“~”选择一般同级。
见this fiddle.
代码:
.ServPic:hover ~ .PicSource {
opacity: 1;
}
让我为css中的同级选择器添加一些解释。
对于初学者来说,兄弟元素是html中完全相同级别的元素。
例如:
<div>
<p id="sibling1"></p>
<p id="sibling2"></p>
<a id="sibling3"></a>
</div>
<p>I am not a sibling of 1, 2 and 3.</p>
兄弟1、2和3在标记中都处于同一级别。div下的p标记与div处于同一级别,但与兄弟1、2和3不在同一级别。
现在sibling1的直接兄弟姐妹是sibling2。兄弟姐妹2的直接兄弟姐妹是兄弟姐妹3,但不是2,这很重要。
兄弟姐妹1的一般兄弟姐妹是兄弟姐妹2和兄弟姐妹3。