Bootstrap 实现鼠标划过图片弹出二维码图

要在 Bootstrap 中实现鼠标划过图片弹出二维码图，可以使用 Bootstrap 的弹出框组件和一些自定义的 CSS 样式来实现。

首先，需要在 HTML 中引入 Bootstrap 的 CSS 和 JavaScript 文件。可以通过以下 CDN 链接来引入：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

接下来，可以在 HTML 中添加一个包含图片和二维码的容器，并设置其样式和属性：

<div class="image-container">
  <img src="path_to_image.jpg" alt="Image" class="img-fluid">
  <div class="qr-code">
    <img src="path_to_qr_code.png" alt="QR Code" class="img-fluid">
  </div>
</div>

在 CSS 中，可以设置容器的样式和二维码的位置：

.image-container {
  position: relative;
  display: inline-block;
}

.qr-code {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s, opacity 0.5s;
}

.image-container:hover .qr-code {
  visibility: visible;
  opacity: 1;
}

最后，可以使用 Bootstrap 的弹出框组件来实现鼠标划过图片时弹出二维码图的效果。在 JavaScript 中，可以使用以下代码：

var qrCode = new bootstrap.Popover(document.querySelector('.qr-code'), {
  trigger: 'manual',
  content: function () {
    return '<img src="path_to_qr_code.png" alt="QR Code" class="img-fluid">';
  }
});

document.querySelector('.image-container').addEventListener('mouseenter', function () {
  qrCode.show();
});

document.querySelector('.image-container').addEventListener('mouseleave', function () {
  qrCode.hide();
});

这样，当鼠标划过图片时，会弹出一个包含二维码图的弹出框。