导航栏条件样式实现求助：hover交互效果异常问题

核心需求：鼠标悬停在导航菜单项上时，当前项放大，其前后相邻项分别向左右偏移指定像素。

我写了以下样式代码实现变换效果：

.navitem{
  display:inline;
  transition: transform .75s ease-in-out;
}
.navitemRight {
  transform: translate(10px);
}
.navitemLeft{
  transform: translate(-10px);
}
.navitemCenter{
  text-shadow:0px 0px 1px black;
  transform: scale(1.20);
}

问题在于，动态生成的导航项无法自动触发hover样式，理想的逻辑是：

.item2:hover ~ .item1{
   /* 左侧项偏移样式 */
} 
.item2:hover ~ .item3{
   /* 右侧项偏移样式 */
} 

我尝试用React实现，通过onMouseEnter和onMouseLeave修改组件状态并重渲染导航栏，效果接近但移出hover时过渡生硬，丢失了原本的平滑动画。

我知道可以用JavaScript、Sass或jQuery实现，但对这些工具不熟悉，求解决方案或工具参考。

可行解决方案 #

方案一：原生JavaScript实现（无需框架） #

通过监听导航项的mouseenter和mouseleave事件，动态给当前项、前一项和后一项添加/移除样式类，保留CSS过渡效果：

<div class="nav-container">
  <span class="navitem">菜单项1</span>
  <span class="navitem">菜单项2</span>
  <span class="navitem">菜单项3</span>
  <span class="navitem">菜单项4</span>
</div>

<style>
.nav-container {
  display: flex;
  gap: 20px;
  align-items: center;
}
.navitem{
  transition: transform .75s ease-in-out;
  cursor: pointer;
}
.navitem-right {
  transform: translate(10px);
}
.navitem-left{
  transform: translate(-10px);
}
.navitem-center{
  text-shadow:0px 0px 1px black;
  transform: scale(1.20);
}
</style>

<script>
const navItems = document.querySelectorAll('.navitem');

navItems.forEach(item => {
  item.addEventListener('mouseenter', () => {
    // 清除所有项的样式类
    navItems.forEach(i => {
      i.classList.remove('navitem-center', 'navitem-left', 'navitem-right');
    });
    // 给当前项添加放大类
    item.classList.add('navitem-center');
    // 给前一项添加右偏移类
    const prevItem = item.previousElementSibling;
    if (prevItem) prevItem.classList.add('navitem-right');
    // 给后一项添加左偏移类
    const nextItem = item.nextElementSibling;
    if (nextItem) nextItem.classList.add('navitem-left');
  });

  item.addEventListener('mouseleave', () => {
    // 移除所有类，触发平滑过渡
    navItems.forEach(i => {
      i.classList.remove('navitem-center', 'navitem-left', 'navitem-right');
    });
  });
});
</script>

方案二：React优化方案（修复动画丢失） #

之前的React方案丢失过渡效果，是因为状态切换时样式类被直接移除导致动画中断。可以通过状态记录hover项，渲染时动态添加类，确保transition属性始终生效：

import { useState } from 'react';

function Navbar() {
  const [hoverIndex, setHoverIndex] = useState(-1);
  const items = ['菜单项1', '菜单项2', '菜单项3', '菜单项4'];

  return (
    <div className="nav-container">
      {items.map((item, index) => {
        let className = 'navitem';
        if (index === hoverIndex) {
          className += ' navitem-center';
        } else if (index === hoverIndex - 1) {
          className += ' navitem-right';
        } else if (index === hoverIndex + 1) {
          className += ' navitem-left';
        }

        return (
          <span
            key={index}
            className={className}
            onMouseEnter={() => setHoverIndex(index)}
            onMouseLeave={() => setHoverIndex(-1)}
          >
            {item}
          </span>
        );
      })}
    </div>
  );
}

/* 配套CSS与之前一致 */

方案三：Sass简化样式（配合JS） #

用Sass循环减少重复样式代码，不过仍需JavaScript处理前序兄弟节点的选中问题：

$item-count: 4; // 按需修改导航项数量

.navitem{
  display:inline;
  transition: transform .75s ease-in-out;
}
.navitem-right {
  transform: translate(10px);
}
.navitem-left{
  transform: translate(-10px);
}
.navitem-center{
  text-shadow:0px 0px 1px black;
  transform: scale(1.20);
}

// 循环生成hover后序兄弟的样式
@for $i from 1 through $item-count {
  .navitem:nth-child(#{$i}):hover ~ .navitem:nth-child(#{$i + 1}) {
    transform: translate(10px);
  }
}

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