计算两个移动HTML元素间距时hover状态结果不更新的问题排查

这个问题的核心很明确——你的距离计算逻辑只在页面加载时跑了一次，完全没考虑到元素hover移动后的位置更新！

具体问题拆解 #

页面刚加载时，你的JS代码立即获取了#x和#y的初始位置并完成了距离计算，此时两个元素都停在左上角的初始位置。而当你hover容器触发元素移动后，这段新的位置并没有被重新读取和计算，所以页面上显示的结果始终是初始值，不会变化。

修复方案 #

我们需要把距离计算的逻辑封装成可复用的函数，然后在页面初始加载和元素位置发生变化后这两个关键时机去调用它。另外因为你给元素加了1秒的过渡动画，最好等动画完全完成后再计算，避免拿到元素移动过程中的中间位置。

下面是修改后的完整代码：

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
  <div id="result"></div>
  <div id="x"></div>
  <div id="y"></div>
</div>

CSS

html, body{ margin:0; padding:0; }
*{ transition:all 1s; }
#x, #y{ width:50px; height:50px; margin-left:0; margin-top:0; background:black; }
#container{ height:100vh; width:100vw; background:lightgrey; }
#container:hover #x{ margin-left:50vw; }
#container:hover #y{ margin-top:50vh; }

JavaScript

// 封装距离计算的可复用函数
function calculateDistance() {
  // 先清空之前的结果，避免重复追加导致内容混乱
  $('#result').empty();
  
  var lFirst = $("#x").offset().left;
  var lSecond = $("#y").offset().left;
  var ldist = parseInt(lFirst - lSecond);
  
  var tFirst = $("#x").offset().top;
  var tSecond = $("#y").offset().top;
  var tdist = parseInt(tFirst - tSecond);
  
  $('#result').append(parseInt(tdist + ldist));
}

// 页面加载完成后先计算初始距离
$(document).ready(function() {
  calculateDistance();
  
  // 监听容器的鼠标进入事件，等待过渡动画完成后重新计算
  $('#container').on('mouseenter', function() {
    // 等待1秒（和CSS过渡时间保持一致）确保元素移动到位
    setTimeout(calculateDistance, 1000);
  });
  
  // 鼠标离开容器时，元素回到初始位置，同样重新计算距离
  $('#container').on('mouseleave', function() {
    setTimeout(calculateDistance, 1000);
  });
});

关键修改说明 #

1. 封装计算函数：把原本一次性的计算逻辑放进calculateDistance()，方便在多个时机重复调用
2. 初始调用：页面加载完成后先执行一次，显示初始状态的距离
3. hover事件监听：在鼠标进入/离开容器时，等待过渡动画结束后再计算距离，确保拿到元素的最终位置
4. 清空结果容器：每次计算前先清空#result，避免多次追加导致结果叠加混乱

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