响应式jQuery脚本故障排查：window.onmousemove事件失效

原代码核心问题 #

1. 条件逻辑完全颠倒：你需要在屏幕宽度大于992px时启用鼠标跟随效果，但原代码仅在<992px时绑定事件，逻辑完全写反。
2. 事件覆盖与未清理：直接赋值window.onmousemove会覆盖原有事件绑定，且鼠标离开li后未移除监听，导致后续鼠标移动仍触发旧逻辑。
3. HTML结构缺失：你的li标签里没有.show-info元素，$(this).find('.show-info')无法找到目标，自然无法执行跟随逻辑。

修复后的完整代码 #

1. 修正后的JavaScript

// 封装屏幕尺寸判断与事件绑定逻辑
function initPanelHover() {
  const isDesktop = $(window).width() > 992;
  
  // 先移除旧事件，避免重复绑定
  $('#hwdo-panel ul li').off('mouseenter mouseleave');
  
  $('#hwdo-panel ul li')
    .on('mouseenter', function() {
      if (!isDesktop) return; // 小屏直接跳过，不执行跟随逻辑
      
      const $infoBox = $(this).find('.show-info');
      if (!$infoBox.length) return;
      
      $infoBox.show();
      // 添加带命名空间的鼠标移动监听，避免干扰其他事件
      const moveHandler = (e) => {
        $infoBox.offset({ top: e.pageY, left: e.pageX + 50 });
      };
      $(window).on('mousemove.panelInfo', moveHandler);
    })
    .on('mouseleave', function() {
      if (!isDesktop) return;
      
      const $infoBox = $(this).find('.show-info');
      $infoBox.hide();
      // 移除对应监听，防止内存泄漏
      $(window).off('mousemove.panelInfo');
    });
}

// 初始化执行
initPanelHover();
// 窗口尺寸变化时重新适配
$(window).on('resize', initPanelHover);

2. 补全后的HTML（添加缺失的.show-info元素）

<div id="hwdo-panel">
  <ul>
    <li>
      <h3 data-hover="Details">Details</h3>
      <div class="show-info">
        <p>this is a test for Details</p>
      </div>
    </li>
    <li>
      <h3 data-hover="Passion">Passion</h3>
      <div class="show-info">
        <p>this is a test for Passion</p>
      </div>
    </li>
    <li>
      <h3 data-hover="Courage">Courage</h3>
      <div class="show-info">
        <p>this is a test for Courage</p>
      </div>
    </li>
    <li>
      <h3 data-hover="Care">Care</h3>
      <div class="show-info">
        <p>this is a test for Care</p>
      </div>
    </li>
  </ul>
</div>

3. 优化后的CSS（调整响应式显示逻辑）

:root {
  --pink: #ff4d6d;
  --white: #ffffff;
}

#hwdo-panel {
  position: relative;
  background: #000;
  padding: 2em;
}

#hwdo-panel ul {
  font-weight: 900;
  list-style: none;
  margin: 0;
  padding: 0;
}

#hwdo-panel ul:hover > li {
  opacity: 0.1;
}

#hwdo-panel ul li {
  border-bottom: 2px solid #fff;
  margin-bottom: 1em;
  transition: 0.5s;
  position: relative;
}

#hwdo-panel ul li:hover {
  opacity: 1;
}

#hwdo-panel ul li:last-child {
  border-bottom: none;
}

#hwdo-panel .show-info {
  display: block;
  position: relative;
  top: 0;
  left: 0;
  padding: 1em 0;
  font-weight: 500;
  width: 100%;
  color: var(--white);
}

@media (min-width: 992px) {
  #hwdo-panel .show-info {
    display: none;
    position: absolute;
    background: var(--pink);
    padding: 2em;
    width: 30%;
    z-index: 90;
    color: #000;
  }
}

#hwdo-panel ul li h3 {
  position: relative;
  color: transparent;
  text-transform: uppercase;
  -webkit-text-stroke-width: 2px;
  -webkit-text-stroke-color: white;
  display: inline-block;
  width: 100%;
  letter-spacing: 5px;
  cursor: pointer;
}

#hwdo-panel ul li h3:before {
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  color: var(--pink);
  content: attr(data-hover);
}

#hwdo-panel ul li h3:hover:before {
  width: 100%;
  transition: all 3s cubic-bezier(0.17, 0.67, 0.32, 0.87);
}

#hwdo-panel ul li h3:after {
  content: '+';
  position: relative;
  float: right;
  font-size: .5em;
  color: var(--white);
  -webkit-text-stroke-width: 0;
  font-weight: 500;
}

#hwdo-panel ul li h3:hover:after {
  color: var(--pink);
}

关键修复说明 #

• 逻辑修正：将屏幕宽度判断改为>992px时执行鼠标跟随，小屏直接依赖CSS默认显示.show-info。
• 事件管理：使用带命名空间的事件绑定/移除，避免覆盖其他事件，同时防止内存泄漏。
• 结构补全：为每个li添加.show-info元素，确保JS能定位到目标。
• 响应式适配：监听窗口resize事件，屏幕尺寸变化时自动重新适配逻辑。

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