JS实现鼠标移动到图片上显示提示内容，类似天气

在网页设计中，我们经常需要实现一种功能：当鼠标悬停在图片上时，能够显示额外的提示信息，类似于天气预报地图中显示的提示。这种功能可以增强用户体验，让用户更直观地了解图片所代表的信息。在JavaScript中，我们可以利用事件监听、DOM操作以及CSS样式来实现这一效果。 我们需要在HTML中为每张图片添加一个`<title>`或`<alt>`标签，用于存储提示信息。例如： ```html <img src="image.jpg" alt="天气晴朗，温度26℃"> ``` 接下来，我们使用JavaScript来监听鼠标的`mouseover`和`mouseout`事件。当鼠标进入图片区域时，显示提示信息；当鼠标离开图片时，隐藏提示信息。我们可以创建一个函数来处理这个逻辑： ```javascript function addTooltip(imgElements) { for (let img of imgElements) { img.addEventListener('mouseover', function(event) { // 创建提示框元素 let tooltip = document.createElement('div'); tooltip.className = 'tooltip'; // 添加CSS类名以便样式设置 tooltip.textContent = this.alt; // 获取图片的alt属性作为提示内容 // 设置提示框的位置 let position = this.getBoundingClientRect(); tooltip.style.left = position.left + 'px'; tooltip.style.top = (position.bottom + 10) + 'px'; // 隐藏在图片下方 // 将提示框添加到文档中 document.body.appendChild(tooltip); // 显示提示框 tooltip.style.display = 'block'; }); img.addEventListener('mouseout', function() { // 隐藏提示框 let tooltip = document.querySelector('.tooltip'); if (tooltip) { tooltip.remove(); } }); } } // 获取所有带有alt属性的图片 let imagesWithAlt = document.querySelectorAll('img[alt]'); addTooltip(imagesWithAlt); ``` 在上述代码中，我们创建了一个`addTooltip`函数，它接受一个包含图片元素的集合，然后为每个图片添加事件监听器。当鼠标移到图片上时，创建一个新的`<div>`作为提示框，并将`alt`属性的值设置为提示内容。我们还计算了提示框的位置，使其位于图片下方，然后将其添加到页面上并显示。当鼠标离开图片时，我们查找并移除当前的提示框。 我们需要添加一些CSS样式来美化提示框： ```css .tooltip { position: absolute; background-color: rgba(0, 0, 0, 0.8); color: white; padding: 5px 10px; border-radius: 3px; font-size: 14px; display: none; } ``` 这段CSS设置了提示框的基本样式，包括位置、颜色、边框和字体大小。`display: none`初始状态下隐藏提示框，当JavaScript将其设置为`block`时，它会显示出来。 通过JavaScript和CSS，我们可以实现鼠标悬停在图片上时显示提示信息的功能。这个功能在网页中广泛应用，不仅限于天气预报地图，还可以用于任何需要提供额外信息的图片场景。通过调整CSS样式，我们可以进一步定制提示框的外观，使其更好地融入页面设计。