css+点击弹出图片

CSS在网页制作中起着十分重要的作用，其中一个常见的应用就是通过点击弹出图片。具体实现如下：

HTML代码:div class="image-click">
      a href="#">
    img src="example.jpg" alt="example">
    /a>
      div class="image-popup">
        img src="example.jpg" alt="example">
      /div>
    /div>
CSS代码:.image-popup {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0,0,0,0.8);
      z-index: 9999;
}
img {
      max-width: 100%;
      max-height: 100%;
}
.image-click:hover .image-popup {
      display: block;
}
    

代码说明：

使用class为"image-click"的div包裹图片与弹出层，通过该div实现hover事件监听；

使用a标签包裹图片，实现鼠标点击事件监听；

使用class为"image-popup"的div作为弹出层，初始时设置为display:none，即不显示；

当鼠标移动到图片上时，触发hover事件，使class为"image-popup"的div显示出来；

当鼠标点击图片时，触发a标签的点击事件，同样将class为"image-popup"的div显示出来。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！