实现元素宽度自适应的菜单跟随悬停效果

以下是实现点击时高亮条自适应导航项宽度、悬停时跟随移动的完整代码：

HTML #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
<nav id="page-nav">
  <a href="#" class="active">item #1</a>
  <a href="#">item #2</a>
  <a href="#">item njkkjhoihnikhihi #3</a>
  <span class="blip"></span>
</nav>

CSS #

a {
  display: inline-block;
  position: relative;
  top: -1px;
  padding: 10px 20px;
  text-align: center;
  line-height: 41px !important;
  color: #c3c3c3;
  text-decoration: none;
  text-shadow: 1px 1px 0px black;
  text-transform: uppercase;
  font-family: "Myriad Pro", "Calibri", sans-serif;
  font-size: 16px;
  letter-spacing: 1px;
  text-align: center;
}

#page-nav {
  height: 100px;
  overflow-y: hidden;
  position: relative;
  background: #222;
}

.blip {
  position: absolute;
  background: rgba(100, 100, 255, 0.4);
  height: 100%;
  top: 0;
  left: 0;
  transition: all 0.3s ease-in-out;
}

JavaScript #

var $blip = $('.blip');
var $navItems = $('#page-nav>a');

// 统一设置高亮条位置和宽度
function setBlipPosition($target) {
  $blip.css({
    left: $target.offset().left - $target.parent().offset().left,
    width: $target.outerWidth()
  });
}

// 页面加载时默认选中第一个导航项
setBlipPosition($navItems.filter('.active'));

// 点击导航项时更新高亮条并标记选中状态
$navItems.on('click', function() {
  $navItems.removeClass('active');
  $(this).addClass('active');
  setBlipPosition($(this));
});

// 悬停时高亮条跟随当前项
$navItems.on('mouseenter', function() {
  setBlipPosition($(this));
});

// 离开导航栏时恢复到选中项的高亮状态
$('#page-nav').on('mouseleave', function() {
  setBlipPosition($navItems.filter('.active'));
});

关键修改说明： #

• 调整.blip的DOM位置：从单个导航项内移到#page-nav容器下，作为全局跟随元素，确保能覆盖所有导航项
• 封装setBlipPosition函数：统一计算高亮条的位置与宽度，避免重复代码
• 补充悬停交互：鼠标悬停时高亮条实时跟随，离开导航栏后自动恢复到当前选中项
• 新增active类：标记当前选中状态，用于初始化和状态恢复
• 优化过渡动画：将过渡属性改为all，让位置和宽度变化都有平滑效果

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