css元素hover时控制另一个元素的显示隐藏
微wx笑
2020-04-29【网页网站】
17
0关键字：
CSS
css元素hover时控制另一个元素的显示隐藏，主要运用CSS样式的多重选择器，也就是当一个元素hover时，另一个样式才起作用。css <style> .qrcode100 { display:none; posit
css元素hover时控制另一个元素的显示隐藏，主要运用CSS样式的多重选择器，也就是当一个元素hover时，另一个样式才起作用。
css
<style>
.qrcode100 { display:none; position:absolute; z-index:99; background-color:#FFF; text-align:center; font-size:12px; padding:10px; border:solid 1px #aaa; }
.qrcode100 img { width: 180px; height:180px; }
.navbar-brand:hover .qrcode100 { display:block !important; }
</style>html
<a class="navbar-brand" href="#" style="color:black;"><img src="qrcode25.png">手机扫码预览<br> <div class="qrcode100"><img src="qrcode100.png"><br>扫一扫，直接在手机上查看</div> </a>
实例参考：https://croppic.ivu4e.com/，鼠标移上去之后显示大图
CSS样式的多重选择器，也就是要通过hover控制显示隐藏的元素必须是子元素才可以。
本文由 微wx笑 创作，采用 署名-非商业性使用-相同方式共享 4.0 许可协议，转载请附上原文出处链接及本声明。
原文链接：https://www.ivu4e.cn/blog/web/2020-04-29/419.html
