<分区>
卡片组件的悬停状态会以某种方式干扰 z-index 排序。有关上下文，请参阅以下 GIF:
下面是两个组件的类:
(为了不让这个问题过于复杂，我不得不简化结构。如果需要，我很乐意提供更多细节。)
// Dropdown
<div className='relative h-full w-full' ref={node} onClick={handleMenuClick}>
{/* Menu button */}
{children} // here I render different elements based on where the Dropdown is placed
{/* Dropdown Content */}
// I removed some classes to show only the relevant ones
<div className=`right top ${isMenuOpen ? 'block' : 'hidden'} absolute z-30 rounded`}
onClick={(e) => e.stopPropagation()}>
... // Dropdown content
</div>
</div>
// Card element
<a className='bg-gray-darkest rounded-xl p-8 hover:brightness-75' // note: this is where I'm having issues
href={props.url}>
<img src='...' alt='...'/>
<div className='mt-6'>
<h4 className='font-display text-lg'>{props.name}</h4>
</div>
</a>
我尝试通过设置不透明度与亮度的动画或使用 Tailwind 的组仅设置卡片内的一些子组件的动画来解决这个问题，但效果是一样的。此外，删除悬停状态并设置静态不透明度或亮度值也会破坏组件的顺序。
感谢您的支持!