网页网站您现在的位置是:首页 > 博客日志 > 网页网站

css元素hover時控制另一个元素的显示隐藏

<a href='mailto:'>微wx笑</a>的头像微wx笑2020-04-29 07:54:53网页网站人已围观关键字: CSS  

css元素hover時控制另一个元素的显示隐藏,主要运用CSS样式的多重选择器,也就是当一个元素hover时,另一个样式才起作用。css <style> .qrcode100 { display:none; posit

css元素hover時控制另一个元素的显示隐藏,主要运用CSS样式的多重选择器,也就是当一个元素hover时,另一个样式才起作用。ixW编程技术_踩坑日志_进阶指南_无知人生


ixW编程技术_踩坑日志_进阶指南_无知人生

cssixW编程技术_踩坑日志_进阶指南_无知人生

    <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>

htmlixW编程技术_踩坑日志_进阶指南_无知人生

<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/,鼠标移上去之后显示大图ixW编程技术_踩坑日志_进阶指南_无知人生

image.pngixW编程技术_踩坑日志_进阶指南_无知人生


ixW编程技术_踩坑日志_进阶指南_无知人生


ixW编程技术_踩坑日志_进阶指南_无知人生

本文由 微wx笑 创作,采用 CC BY-NC 4.0 许可协议。 非商业性使用可自由转载、引用、甚至修改,但需署名作者且注明出处。

很赞哦! () 有话说 ()