Tailwind CSS中relative类导致按钮hover效果失效问题求助

问题根源 #

你的代码存在两个核心问题导致hover效果失效：

• 按钮容器设置了opacity-0，完全透明状态下浏览器无法捕获该元素的hover事件
• 绝对定位的checkbox（z-10）覆盖在按钮上方，即使按钮不透明，hover事件也会被checkbox拦截

修复方案 #

用<label>标签替代按钮的<div>，通过for属性关联checkbox的id，既保留点击切换下拉的功能，又能让hover效果正常触发，同时调整相关样式避免事件拦截：

<div class="mt-4 ml-8">
    <div class="relative w-[122px]">
        <!-- 用label替代div作为按钮，通过for属性关联checkbox -->
        <label for="crypto-dropdown" class="btn bg-primary text-white border-primary border-2 hover:bg-white hover:text-primary cursor-pointer block w-full text-center py-2">
            Cryptocurrency
        </label>
        <!-- 给checkbox添加id，与label绑定 -->
        <input type="checkbox" id="crypto-dropdown" class="peer absolute top-0 inset-x-0 w-full h-full opacity-0 cursor-pointer" />

        <div class="overflow-hidden transition-all duration-500 ml-4 max-h-0 peer-checked:max-h-40">
            <div class="bg-gray-200 rounded">
                <div class="flex items-center justify-center">
                    <ul>
                        <li><a href="/mining">Mining</a></li>
                        <li><a href="/hodl">HODLing</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

关键改动说明 #

• 替换按钮容器为<label>，通过for属性绑定checkbox的id，点击按钮时自动触发checkbox状态切换，无需额外JS逻辑
• 移除按钮的opacity-0，让按钮可见并能正常捕获hover事件
• 将checkbox的h-10改为h-full，确保整个按钮区域都能触发点击操作
• 给按钮添加block w-full text-center py-2，保证按钮尺寸适配容器、文本居中，提升交互体验
• 移除父容器的overflow-hidden，避免截断下拉菜单的展开效果

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