【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';
});

在这个示例中，我们首先创建了一个带有图标的链接 <a> 元素，并为其添加了 popup-link 类。然后，我们创建了一个包含图片的弹窗容器 <div>，并为其添加了 popup-container ID。通过 CSS，我们设置了弹窗容器的样式，并使用 display: none 将其隐藏。

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

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

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