javascript - 点击放大图片

Question

我正在使用 bootstrap 中的缩略图，当我单击该缩略图以显示原始尺寸的图片时，我想这样做，当我单击某个地方时，原始尺寸的图片消失。我希望你能理解我要解释的内容。这是我的缩略图代码示例

<div class="row">
  <div class="col-xs-6 col-md-3">

        <a href="#" class="thumbnail">
          <img src="..." alt="...">
        </a>
      </div>
      ...
    </div>

Answer 1

也许你可以试试 CSS:onfocus .

a.thumbnail:focus > img.small {
        visibility: hidden;
}
a.thumbnail:focus > img.large{
        visibility: visible;
}

HTML:

    <a href="#" class="thumbnail" tabindex="0">
      <img class="small" src="..." alt="..."></img>
      <img class="large" src="..." alt="..."></img>
    </a>

请注意 tabindex="0"这里有必要制作<a>可聚焦。