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

a6b3iqyw 于 2023-01-10 发布在其他

关注(0)|答案(2)|浏览(108)

我为侧栏导航创建了此样式

我做了一个盒子，并使用变换隐藏它的左侧，以获得弯曲的边界效果。
悬停、活动等

边框按钮-〉背景-绿色-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中，以同时激活每个子元素中的悬停效果？
现在，只有当我将鼠标悬停在每个单独的元素上时，它才起作用。
任何帮助都非常感谢：）

laravel

来源：https://stackoverflow.com/questions/65946335/how-to-make-parent-div-activate-styling-of-child-div-for-hover-and-active

2条答案

按热度按时间

blmhpbnm1#

使用组悬停状态
1.将group类添加到父元素（在本例中为anchor-tag）
1.将hover:替换为group-hover:
值得一提的是，并不是每个属性都支持组悬停，所以可能会有这样的情况，你可能需要扩展核心插件。
演示https://play.tailwindcss.com/dzacJTR76X

赞(0）回复(0）举报 2023-01-10

h7appiyu2#

在parent中使用group，在child中使用group:hover

代码结构：

<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>

输出：

悬停：

赞(0）回复(0）举报 2023-01-10

我来回答

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

2条答案

代码结构：

示例：

输出：

悬停：

相关问题

热门标签

最新问答