css 鼠标悬浮显示放大图片 vs 鼠标点击显示放大图片

鼠标悬浮显示放大图片

实现原理

• 使用动态伪类 :hover 和相邻兄弟选择器 + ，通过display控制显示隐藏
• 元素绝对定位后，没有指定top等方位时，元素依然保留在原始的文档流位置，此处通过给小图标添加margin来控制大图的位置，也可以直接在大图上添加margin。

<template>
  <div style="padding:30px">
    鼠标悬浮显示放大后的二维码：<img
      class="icon-qrcode"
      :src="imgData"
      tabindex="0"
    />
    <img class="img-qrcode" :src="imgData" />
  </div>
</template>
<script>export default {
  data() {
    return {
      imgData:
        "data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PGRlZnM+PHN0eWxlLz48L2RlZnM+PHBhdGggZD0iTTAgMTAyMy45OTJoNDY1LjQ1M1Y1NTguNTM0SDB2NDY1LjQ1OHptOTMuMDgzLTM3Mi4zNkgzNzIuMzZ2Mjc4LjU1M0g5My4wODNWNjUxLjYzM3oiLz48cGF0aCBkPSJNMTg2LjE4IDc0NC43MTZoOTMuMDg4djkzLjEwMkgxODYuMTh6TTc0NC43MDkgOTMwLjkxaDkzLjExMVYxMDI0SDc0NC43MXptMTg2LjE4MiAwSDEwMjRWMTAyNGgtOTMuMTA5eiIvPjxwYXRoIGQ9Ik05MzAuOTAxIDY1MS42MzNoLTkzLjA4M3YtOTMuMDk5SDU1OC41MzR2NDY1LjQ1OGg5My4wOTlWNzQ0LjcxNmg5My4wNzZ2OTMuMTAyaDI3OS4yODNWNTU4LjUzNGgtOTMuMDl6TTAgNDY1LjQ2M2g0NjUuNDUzVjBIMHY0NjUuNDYzem05My4wODMtMzcyLjM4SDM3Mi4zNlYzNzIuMzZIOTMuMDgzVjkzLjA4M3oiLz48cGF0aCBkPSJNMTg2LjE4IDE4Ni4xOGg5My4wODh2OTMuMDk2SDE4Ni4xOHpNNTU4LjUzNCAwdjQ2NS40NjNIMTAyNFYwSDU1OC41MzR6bTM3Mi4zNjcgMzcyLjM2SDY1MS42MzNWOTMuMDgySDkzMC45VjM3Mi4zNnoiLz48cGF0aCBkPSJNNzQ0LjcwOSAxODYuMThoOTMuMTExdjkzLjA5Nkg3NDQuNzF6Ii8+PC9zdmc+",
    };
  },
};</script>

<style scoped>.icon-qrcode {
  width: 20px;
  height: 20px;
  vertical-align: middle;
  margin-right: 10px;
}
.img-qrcode {
  position: absolute;
  display: none;
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}

:hover + .img-qrcode {
  display: inline;
}</style>

鼠标点击显示放大图片

实现原理

• 使用动态伪类 :focus 和相邻兄弟选择器 + ，通过display控制显示隐藏
• 元素绝对定位后，没有指定top等方位时，元素依然保留在原始的文档流位置，此处通过给大图添加margin来控制大图的位置，也可以在小图上添加margin。

<template>
  <div style="padding:30px">
    鼠标点击显示放大后的二维码：<img
      class="icon-qrcode"
      :src="imgData"
      tabindex="0"
    />
    <img class="img-qrcode" :src="imgData" />
  </div>
</template>
<script>export default {
  data() {
    return {
      imgData:
        "data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PGRlZnM+PHN0eWxlLz48L2RlZnM+PHBhdGggZD0iTTAgMTAyMy45OTJoNDY1LjQ1M1Y1NTguNTM0SDB2NDY1LjQ1OHptOTMuMDgzLTM3Mi4zNkgzNzIuMzZ2Mjc4LjU1M0g5My4wODNWNjUxLjYzM3oiLz48cGF0aCBkPSJNMTg2LjE4IDc0NC43MTZoOTMuMDg4djkzLjEwMkgxODYuMTh6TTc0NC43MDkgOTMwLjkxaDkzLjExMVYxMDI0SDc0NC43MXptMTg2LjE4MiAwSDEwMjRWMTAyNGgtOTMuMTA5eiIvPjxwYXRoIGQ9Ik05MzAuOTAxIDY1MS42MzNoLTkzLjA4M3YtOTMuMDk5SDU1OC41MzR2NDY1LjQ1OGg5My4wOTlWNzQ0LjcxNmg5My4wNzZ2OTMuMTAyaDI3OS4yODNWNTU4LjUzNGgtOTMuMDl6TTAgNDY1LjQ2M2g0NjUuNDUzVjBIMHY0NjUuNDYzem05My4wODMtMzcyLjM4SDM3Mi4zNlYzNzIuMzZIOTMuMDgzVjkzLjA4M3oiLz48cGF0aCBkPSJNMTg2LjE4IDE4Ni4xOGg5My4wODh2OTMuMDk2SDE4Ni4xOHpNNTU4LjUzNCAwdjQ2NS40NjNIMTAyNFYwSDU1OC41MzR6bTM3Mi4zNjcgMzcyLjM2SDY1MS42MzNWOTMuMDgySDkzMC45VjM3Mi4zNnoiLz48cGF0aCBkPSJNNzQ0LjcwOSAxODYuMThoOTMuMTExdjkzLjA5Nkg3NDQuNzF6Ii8+PC9zdmc+",
    };
  },
};</script>

<style scoped>.icon-qrcode {
  width: 20px;
  height: 20px;
  vertical-align: middle;
}
.img-qrcode {
  margin-left: 10px;
  position: absolute;
  display: none;
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}

:focus + .img-qrcode {
  display: inline;
}</style>