【H5】使用 JavaScript 和 CSS 来完成实现鼠标接触时显示一个图片弹窗

以下是一个示例，演示了如何在鼠标接触时显示一个图片弹窗：

HTML:

<a href="#" class="popup-link" target="_blank">
  <i class="fab fa-weixin">i>
a>

<div id="popup-container">
  <img src="your-image-url" alt="Popup Image">
div>

CSS:

#popup-container {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 400px;
  height: 300px;
  background-color: #fff;
  padding: 20px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

.popup-link:hover + #popup-container {
  display: block;
}

JavaScript (如果需要动态控制弹窗的显示和隐藏):

var popupLink = document.querySelector('.popup-link');
var popupContainer = document.querySelector('#popup-container');

popupLink.addEventListener('mouseover', function() {
  popupContainer.style.display = 'block';
});

popupLink.addEventListener('mouseout', function() {
  popupContainer.style.display = 'none';
});

在这个示例中，我们首先创建了一个带有图标的链接 元素，并为其添加了 popup-link 类。然后，我们创建了一个包含图片的弹窗容器

，并为其添加了 popup-container ID。通过 CSS，我们设置了弹窗容器的样式，并使用 display: none 将其隐藏。

在 CSS 中，我们使用兄弟选择器 + 来选择弹窗容器，当鼠标悬停在带有 popup-link 类的链接元素上时，通过 display: block 将弹窗容器显示出来。

如果你希望通过 JavaScript 动态控制弹窗的显示和隐藏，可以使用 mouseover 和 mouseout 事件监听器来监听鼠标接触事件，并在事件发生时更新弹窗容器的显示状态。

请确保将 your-image-url 替换为实际的图片 URL。