如何使父 div 激活子 div 的样式以进行悬停和活动答案

【问题标题】：How to make parent div activate styling of child div for hover and active如何使父 div 激活子 div 的样式以进行悬停和活动
【发布时间】：2021-05-02 21:25:16
【问题描述】：

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

我做了一个盒子，用transform把它隐藏在左边，得到弯曲的边框效果。

悬停时，活动等

边框按钮 -> bg-green-300
text-green-300 用于图标和文本
font-semibold 仅用于文本

<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 中添加什么东西来同时激活每个子元素中的悬停效果吗？

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

非常感谢任何帮助:)

【问题讨论】：

标签： laravel tailwind-css

【解决方案1】：

使用组悬停状态

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

值得一提的是，并非每个属性都支持 group-hover，因此可能存在需要扩展核心插件的情况。更多关于 group-hover here

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

【讨论】：

非常感谢您的帮助！ :)