我正在尝试在图像上添加透明文本叠加层.我已经决定使用CSS添加透明div是最简单的,但无法弄清楚为什么我的代码不起作用.我在悬停时更改了图像的不透明度,并将包含文本的div设置为visibility:hidden.我使用hovereffect来提高可见度:可见.我只是无法让它工作.请帮忙.这是小提琴:
https://jsfiddle.net/3Lx1pyL9/
这是html:
<div id="chickcontainer"> <img src="http://animal-dream.com/data_images/chicken/chicken7.jpg"><div class="overlay">chicks</div> <img class="chicks" src="https://smittenkitchendotcom.files.wordpress.com/2016/09/piri-piri-chicken.jpg?w=750"> <img class="chicks" src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRzRJV4iLzYh0eqyVG9-OidAW1t24Xa_vmVRX4Qy-WoyMIgpCx6"> </div>
和css:
#chickcontainer img{ position:relative; width:30%; height:30%; display:inline-block; margin-left:2%; border-radius:100%; border: solid .5px; } .overlay{ visibility:hidden; position:absolute; width:20%; height:90%; top:12%; left:7%; z-index:0; } #chickcontainer img:hover .overlay{ visibility:visible; z-index:100; }
解决方法
问题是你的选择器:
#chickcontainer img:hover .overlay
这个选择器期望.overlay是img:hover的后代,而图像根本不能有后代.在你的html中,.overlay是一个位于图像旁边的兄弟.
<img src="http://animal-dream.com/data_images/chicken/chicken7.jpg"><div class="overlay">chicks</div>
相反,您应该使用“next sibling”选择器来选择下一个元素并将样式应用于它.
#chickcontainer img:hover + .overlay
这是一个有效的例子
#chickcontainer img{ position:relative; width:30%; height:30%; display:inline-block; margin-left:2%; border-radius:100%; border: solid .5px; } .overlay{ visibility:hidden; position:absolute; width:20%; height:90%; top:12%; left:7%; z-index:0; } #chickcontainer img:hover + .overlay{ visibility:visible; z-index:100; }
<div id="chickcontainer"> <img src="http://animal-dream.com/data_images/chicken/chicken7.jpg"><div class="overlay">chicks</div> <img class="chicks" src="https://smittenkitchendotcom.files.wordpress.com/2016/09/piri-piri-chicken.jpg?w=750"> <img class="chicks" src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRzRJV4iLzYh0eqyVG9-OidAW1t24Xa_vmVRX4Qy-WoyMIgpCx6"> </div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。