如何用jQuery UI实现鼠标悬停时矩形外框水平跟随的菜单效果？

嘿，刚好你在啃jQuery UI的基础，这个菜单交互需求用它来实现真的挺顺手的！先给你理清楚核心：我们要做的就是一个只有外框的矩形，跟着鼠标只在水平方向移动（Y轴可以固定在菜单区域，或者根据需求调整），完全不用Flash，用jQuery UI就能搞定。

jQuery UI里能帮上忙的家伙 #

最核心的就是它的position组件！这个组件专门用来处理元素的相对定位，能让目标元素精准跟着鼠标位置走，还能灵活控制偏移量，刚好满足你只水平移动的要求。而且配合jQuery的事件监听，代码写起来简洁又规范，完全符合你学习jQuery UI基础的场景。

一步步来实现 #

1. 先搭好HTML结构 #

简单明了，菜单选项加上那个要跟随的外框：

<div class="menu-container">
  <div class="menu-item">首页</div>
  <div class="menu-item">产品</div>
  <div class="menu-item">关于我们</div>
  <div class="menu-item">联系我们</div>
  <!-- 这个就是要跟随的外框啦 -->
  <div class="hover-outline"></div>
</div>

2. 给元素加基础样式 #

外框要设成绝对定位，这样才能自由移动，还要关掉它的鼠标事件，不然会干扰菜单的交互：

.menu-container {
  position: relative;
  display: flex;
  gap: 20px;
  padding: 10px;
  background: #f5f5f5;
}
.menu-item {
  padding: 8px 16px;
  cursor: pointer;
}
.hover-outline {
  position: absolute;
  border: 2px solid #2196F3;
  pointer-events: none; /* 不让外框抢鼠标事件 */
  display: none; /* 初始隐藏 */
}

3. 核心的jQuery UI代码 #

监听鼠标移动事件，用position组件定位外框，同时限制它只在水平方向动：

$(document).ready(function() {
  const $outline = $('.hover-outline');
  const $menuContainer = $('.menu-container');

  // 鼠标在菜单里移动时，让外框跟着走
  $menuContainer.on('mousemove', function(e) {
    $outline.show().position({
      my: 'left top', // 外框的左上角
      at: 'left top', // 对齐鼠标的左上角
      of: e, // 参考目标是鼠标事件
      offset: `0 ${$menuContainer.offset().top - e.pageY}`, // 这里固定Y轴位置，只让X轴跟随
      collision: 'none' // 不用处理边界碰撞，按需调整
    });
    // 顺便让外框大小匹配当前hover的菜单项，更贴合菜单
    const $hoveredItem = $(e.target).closest('.menu-item');
    if ($hoveredItem.length) {
      $outline.width($hoveredItem.width())
              .height($hoveredItem.height());
    }
  });

  // 鼠标离开菜单时隐藏外框
  $menuContainer.on('mouseleave', function() {
    $outline.hide();
  });
});

为啥这是最优方案？ #

• 纯前端实现，完全不用Flash，兼容性拉满，各种主流浏览器都支持
• 用jQuery UI的position组件省了自己计算坐标偏移的麻烦，代码更干净，也适合你学习UI组件的用法
• 扩展性强，要是后面想加平滑移动的动画，直接配合jQuery UI的animate就行，比如这样改：

$menuContainer.on('mousemove', function(e) {
  const targetX = e.pageX - $menuContainer.offset().left;
  $outline.show().animate({
    left: targetX,
    top: 0 // 固定在菜单顶部
  }, 50); // 50ms的平滑过渡，手感更好
});

这样外框移动就不会生硬啦～

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