如何使父项 div 激活子项 div 的悬停和活动样式

Question

我为侧边栏导航制作了这个样式

我做了一个盒子，用变换把它隐藏在左边，得到弧形边框效果。

悬停、激活等

边框按钮 -> bg-green-300
图标和文本的 text-green-300
仅用于文本的半粗体字体

<a href="/dashboard">
    <div class="flex flex-row space-x-8 w-72 text-lg pb-3 text-gray-200"> 
        
        <div class="h-8 w-8 rounded transform -translate-x-7 hover:bg-green-300"></div>

        <div class="flex flex-row items-center space-x-8 transform -translate-x-10 -translate-y-1">
            <i class="bi bi-columns-gap hover:text-green-300 transform translate-x-1"></i>
            <h2 class="hover:font-semibold hover:text-green-300 transform translate-y-1 text-base">Dashboard</h2>
        </div>
    </div>
</a>

有什么我可以添加到主要 div 以同时激活每个子元素中的悬停效果的东西吗？

现在只有当我将鼠标悬停在每个 dividual 元素上时它才有效。

非常感谢任何帮助:)

Answer 1

使用组悬停状态

将 group class 添加到您的父元素（在您的情况下为锚标记）
将hover:替换为group-hover:

值得一提的是，并非每个属性都支持组悬停，因此在某些情况下，您可能需要扩展核心插件。有关组悬停的更多信息 here

演示版https://play.tailwindcss.com/dzacJTR76X

如何使父项 div 激活子项 div 的悬停和活动样式

How to make parent div activate styling of child div for hover and active

laravel

tailwind-css