如何用JavaScript实现鼠标悬停时将div定位到对应目标div右侧？

首先明确两个核心问题：弹出框的定位规则，以及jQuery对象与原生DOM元素的操作差异。

1. 基础样式配置 #

弹出的div必须设置为绝对定位（position:absolute），才能基于悬停元素的位置进行偏移；若希望弹出框相对于某个父容器定位，需给父容器设置相对定位（position:relative）。

示例CSS：

/* 悬停元素样式 */
.hover-box {
  margin: 15px 0;
  padding: 8px 12px;
  border: 1px solid #ddd;
  /* 若父容器未设relative，可给悬停元素设relative，让弹出框相对它定位 */
  position: relative;
}

/* 弹出框基础样式 */
.popup-box {
  position: absolute;
  display: none;
  padding: 8px 12px;
  background-color: #fff;
  border: 1px solid #333;
  /* 避免被其他元素遮挡 */
  z-index: 100;
}

2. 多组div对的关联方法 #

给每组悬停div和弹出div添加对应标识，比如用data-*属性绑定目标弹出框的ID，确保悬停时能精准匹配对应弹出框。

示例HTML：

<div class="hover-box" data-popup-id="popup1">悬停元素A</div>
<div class="popup-box" id="popup1">弹出内容A</div>

<div class="hover-box" data-popup-id="popup2">悬停元素B</div>
<div class="popup-box" id="popup2">弹出内容B</div>

3. 定位逻辑实现 #

利用jQuery的.offset()（获取元素相对于文档的位置）或.position()（相对于最近定位父元素的位置）获取悬停元素的坐标，结合元素宽度计算弹出框的位置。

你之前用$(divName).style.left无效，是因为$(divName)是jQuery对象，不能直接调用原生DOM的.style属性，需用jQuery的.css()方法，或者把jQuery对象转为原生DOM元素（如$(divName)[0].style.left）。

示例JavaScript：

$('.hover-box').hover(
  // 鼠标进入时的逻辑
  function() {
    const popupId = $(this).data('popup-id');
    const $popup = $('#' + popupId);
    // 获取悬停元素的位置和宽度
    const hoverPos = $(this).offset();
    const hoverWidth = $(this).outerWidth();
    
    // 设置弹出框位置并显示
    $popup.css({
      left: hoverPos.left + hoverWidth + 8, // +8是弹出框与悬停元素的间距
      top: hoverPos.top,
      display: 'block'
    });
  },
  // 鼠标离开时的逻辑
  function() {
    const popupId = $(this).data('popup-id');
    $('#' + popupId).hide();
  }
);

额外优化提示 #

• 若页面存在滚动，.offset()会自动计算滚动偏移，无需额外处理；
• 若要让弹出框与悬停元素垂直居中，可将top值设为hoverPos.top + ($(this).outerHeight() - $popup.outerHeight())/2；
• 若悬停元素的父容器是相对定位，将.offset()替换为.position()即可。

内容的提问来源于stack exchange，提问作者MUMAH