Tailwind CSS group-hover触发范围问题：仅指定元素hover时生效

问题核心是你现在的多级下拉菜单把最外层group的hover状态当成了所有group-hover的触发条件，导致悬停Filter按钮时直接弹出Generation的子菜单。按下面的步骤修改就能实现需求：

修改要点 #

1. 修正嵌套group的类名笔误：把Generation模块的父容器group- relative改成group relative，给它单独设置一个独立的group，和最外层group做区分。
2. 绑定子菜单到自身group：Generation的子下拉菜单，只在自己的group（也就是Generation那一行的容器）hover时显示，不再继承最外层group的hover状态。
3. 补全交互提示：给Generation的容器加上cursor-pointer，让用户直观感知这是可交互元素。

修改后的完整代码 #

<div className='group relative'>
  <div className='flex flex-row px-2 py-1 rounded gap-2 items-center hover:bg-black hover:opacity-20 hover:text-white cursor-pointer'>
    <img src={images.filter_icon} className='w-6 h-6 object-cover group-hover:hidden' alt="" />
    <img src={images.filter_hover_icon} className='w-6 h-6 object-cover group-hover:block hidden' />
    <p>Filter</p>
  </div>
  {/* Filter下拉菜单 - 仅最外层group hover时显示 */}
  <div className='absolute -right-10 top-10 hidden dropdown-menu group-hover:block bg-gray-100 pl-6 pr-16 w-80 py-4 rounded'>
    <p className='mb-6 text-2xl'>Add Filter</p>
       
    {/* Generation模块 - 单独设置独立group */}
    <div className='group relative'>
      {/* 触发子菜单的交互容器 */}
      <div className='bg-gray-200 w-full rounded hover:bg-slate-300 mb-4 cursor-pointer'>
        <p className='p-3'>Generation</p>
        {/* Generation子下拉菜单 - 仅当前group hover时显示 */}
        <div className='absolute top-10 right-72 bg-gray-200 p-4 w-60 font-bold text-xl hidden group-hover:block'>
          <p>Choose a generation</p>
          <div className='flex flex-col gap-2 mt-6'>
            <label className="flex flex-row gap-4 items-center">
              <input type="checkbox" className="w-4 h-4 cursor-pointer" />
              Generation 1
            </label>
          </div>
        </div>
      </div>
    </div>
    <div className=' bg-gray-200 rounded hover:bg-slate-300'>
      <p className='p-3 cursor-pointer'>Type</p>
    </div>
  </div>
</div>
<div className='group flex flex-row px-2 py-1 rounded gap-2 items-center hover:bg-black hover:opacity-20 hover:text-white cursor-pointer'>
  <img src={images.sort_icon} className='w-6 h-6 object-cover group-hover:hidden' alt="" />
  <img src={images.sort_hover_icon} className='w-5 h-5 object-cover group-hover:block hidden' />
  <p>Sort</p>
</div>

逻辑说明 #

• 最外层group仅控制一级下拉菜单的显示/隐藏，只有悬停Filter按钮时才弹出一级菜单。
• Generation模块的独立group，让它的子菜单只响应自身容器的hover事件——也就是只有鼠标悬停在Generation那一行时，才会弹出对应的子菜单。

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