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

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

<a href='mailto:'>微wx笑</a>的头像微wx笑 2020-04-29网页网站 11 0关键字: CSS  

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

css元素hover時控制另一个元素的显示隐藏,主要运用CSS样式的多重选择器,也就是当一个元素hover时,另一个样式才起作用。K02无知


K02无知

cssK02无知

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

htmlK02无知

<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/,鼠标移上去之后显示大图K02无知

image.pngK02无知


K02无知


K02无知

本文由 微wx笑 创作,采用 署名-非商业性使用-相同方式共享 4.0 许可协议,转载请附上原文出处链接及本声明。
原文链接:https://www.ivu4e.com/blog/web/2020-04-29/419.html

很赞哦! () 有话说 ()