css元素hover时控制另一个元素的显示隐藏
微wx笑 2020-04-29【网页网站】2471 17 0关键字: CSS
css元素hover时控制另一个元素的显示隐藏,主要运用CSS样式的多重选择器,也就是当一个元素hover时,另一个样式才起作用。css <style> .qrcode100 { display:none; posit
css元素hover时控制另一个元素的显示隐藏,主要运用CSS样式的多重选择器,也就是当一个元素hover时,另一个样式才起作用。
css
1 2 3 4 5 | <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
1 2 3 | <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