如何使用JavaScript实现鼠标悬停（mouseover）效果？且不覆盖div中图片

在JavaScript中，你可以通过监听`mouseover`事件来实现鼠标悬停的效果。下面是一个简单的示例，展示如何在一个div元素内不覆盖图片的情况下添加悬停提示：

// 获取需要添加悬停效果的div和图片元素
var divElement = document.getElementById('yourDivId');
var imgElement = divElement.getElementsByTagName('img')[0]; // 假设图片是div的第一个子元素

// 定义悬停事件处理函数
function hoverEffect() {
  // 创建一个新的span元素作为提示文本，并设置样式
  var tooltip = document.createElement('span');
  tooltip.className = 'tooltip'; // 类名可以根据需求自定义
  tooltip.textContent = '这是悬停提示信息'; // 提示文字

  // 将提示文本放在鼠标下方
  tooltip.style.position = 'absolute';
  tooltip.style.top = '10px'; // 根据实际位置调整数值
  tooltip.style.left = '50%'; // 中心对齐
  tooltip.style.transform = 'translateX(-50%)'; // 防止超出容器范围

  // 当鼠标悬停时显示提示，离开时隐藏
  divElement.addEventListener('mouseover', function() {
    this.appendChild(tooltip);
  });

  divElement.addEventListener('mouseout', function() {
    tooltip.remove();
  });
}

// 调用hoverEffect函数开始应用效果
hoverEffect();

在这个例子中，当鼠标悬浮到包含图片的div上时，会动态创建一个提示文本并将其放置在图片下方，不会遮盖图片本身。当鼠标移开时，提示文本会被删除。