网页中图片悬浮提示咨询功能的简单实现
在之前的文章中，我们提到了一种功能：《当鼠标移动到图片上时，图片中心位置会提示我们要进行咨询，当鼠标移出图片时，提示会消失。》在使用现成的CMS制作网页首页时，要实现这个功能，需要修改CMS的核心程序，对于新手来说可能会觉得过于复杂。
今天，我将向大家介绍一种更简单的实现方式，使用JavaScript的监听功能来实现这个功能。这种方法实现起来非常简单，使用起来也非常方便，而且效果与之前的方法相同，只是更加简洁。
下面是完整的代码，你只需要进行简单的修改就可以实现完整的功能：
<script>
const entry = document.getElementById('maximg');//监听ID
const images = entry.getElementsByTagName('img');
for (let i = 0; i < images.length; i++) {
const img = images[i];
img.addEventListener('mouseenter', function() {
const button = document.createElement('a');
button.href = '/?Price/'; // 替换为你的咨询网址
button.target = '_blank'; // 在新标签页中打开
button.innerText = '我要咨询';
// 设置按钮样式
button.style.position = 'absolute';
button.style.top = `${img.offsetTop + (img.offsetHeight / 2) - 30}px`;
button.style.left = `${img.offsetLeft + (img.offsetWidth / 2) - 45}px`;
button.style.height = '60px';
button.style.width = '120px';
button.style.borderRadius = '5px';
button.style.backgroundColor = 'rgba(43, 105, 52, 0.8)';
button.style.display = 'flex';
button.style.justifyContent = 'center';
button.style.alignItems = 'center';
button.style.textAlign = 'center';
button.style.fontSize = '24px';
button.style.color = 'white';
button.style.cursor = 'pointer';
entry.appendChild(button);
});
img.addEventListener('mouseleave', function() {
const buttons = entry.getElementsByTagName('a');
for (let j = 0; j < buttons.length; j++) {
entry.removeChild(buttons[j]);
}
});
}
</script>以上就是实现这个功能的完整代码。代码首先获取了页面中所有的图片元素，然后对每个图片元素进行遍历。在鼠标移入图片时，代码会创建一个提示框元素，并将其添加到图片的中心位置上。在鼠标移出图片时，代码会移除该提示框元素。
这个代码还考虑了一些特殊情况。当文章中只有纯文本时，不会显示任何按钮；当文章中有多张图片时，鼠标移动到任意一张图片上时，提示框都会在该图片的中心位置显示。
通过以上代码，你可以轻松实现网页中图片悬浮提示咨询的功能。希望这篇文章对你有帮助！
注意使用之前需要先要设置监听的对象，代码如下：
<div class="entry" id="maximg"> <!--这里是内容> <div>
这里的id需要和上方的JavaScript中的监听ID对应，以上代码在PbootCMS内容页中测试通过。
