如何使父 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 中添加一些内容来同时激活每个子元素中的悬停效果吗？

现在，只有当我将鼠标悬停在每个单独的元素上时，它才起作用。

任何帮助深表感谢 ：）

Answer 1

使用组悬停状态

1. 将组类添加到您的父元素（在您的情况下为锚标记）
2. hover:用。。。来代替group-hover:

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

演示https://play.tai​​lwindcss.com/dzacJTR76X

Answer 2

使用group在parent和group:hover在child

代码结构：

<div class="group">
    <div class="group-hover:... "/>
    <div class="group-hover:... "/>
</div>

例子：

<div class="group flex ">
    <div class="rounded-full bg-black w-10 h-10 group-hover:bg-cyan-400 "></div>
    <i class="text-4xl ml-4 group-hover:bg-cyan-400 cursor-pointer ">Brighten me</i>
</div>

输出：

悬停时：