如何调整代码实现将class为box的div元素显示在鼠标光标下方

问题原因 #

• 原有JS逻辑将box的垂直中心对齐光标位置，直接导致元素和光标重叠
• 计算高度时使用的height()方法仅返回元素内容高度，没有包含你设置的上下各5px边框，实际元素垂直占高计算存在偏差

修改后完整代码 #

HTML 代码 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box"></div>

CSS 代码 #

.box {
  position: fixed; /* 改为fixed定位，避免页面滚动导致位置偏移 */
  left: 0;
  top: 0;
  width: 100%;
  height: 10px;
  background: yellow;
  border-style: solid;
  border-color: black;
  border-width: 5px;
  pointer-events: none; /* 可选配置，避免box遮挡页面其他元素的鼠标交互 */
}

JS 代码 #

// 推荐用on替代已不推荐的bind方法
$(document).on('mousemove', function(e) {
  $('.box').css({
    // 将box顶部设置在光标坐标下方2px位置，可自行调整数值修改光标和box的间距
    top: e.clientY + 2,
  });
});

可选优化说明 #

如果需要box和光标间距和元素高度强关联，可以用outerHeight()方法获取包含边框的完整元素高度做计算；如果页面不需要滚动，保留原有position: absolute配置也可以正常运行。

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