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

Question

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

我制作了一个长方体，并使用“变换”将其隐藏在左侧，以获得弯曲的边界效果。

悬停时，激活ect

• 边框按钮-

<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. 将悬停：替换为组悬停：

值得一提的是，并非每个属性都支持组悬停，因此可能会出现需要扩展核心插件的情况。更多关于group hover的信息

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