Question

我在父div内有3个子div，目前只有部分子div在鼠标悬停时改变颜色，我希望所有子div在部分鼠标悬停时改变颜色。谢谢

我尝试了下面的代码

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Untitled Document</title> 
        <style>
        .container {
            display: inline-block;
            cursor: pointer;
            width: 35px;
        }
        .bar1, .bar2, .bar3 {
            width: 35px;
            height: 5px;
            background-color: #333;
            margin: 6px 0;
            transition: 0.4s;
        }
        .bar1:hover, .bar2:hover, .bar3:hover {
            width: 35px;
            height: 5px;
            background-color: #e5e5e5;
            margin: 6px 0;
            transition: 0.4s;
        }
        </style>
    </head>
    <body>
        <div style=" text-align: right; padding-right: 30px;">
        <div class="container">
            <div class="bar1"></div>
            <div class="bar2"></div>
            <div class="bar3"></div>
        </div>
    </body>
</html>

Answer 1

您可以通过在悬停时选择父节点的子代来实现。

您当前的代码：

.bar1:hover, .bar2:hover, .bar3:hover {
    width: 35px;
    height: 5px;
    background-color: #e5e5e5;
    margin: 6px 0;
    transition: 0.4s;
}

...将分别应用于每个元素（即.bar3本身需要悬停以触发该状态）。

相反，您要选择.container:hover的子元素：

.container:hover .bar1, .container:hover .bar2, .container:hover .bar3 {
    width: 35px;
    height: 5px;
    background-color: #e5e5e5;
    margin: 6px 0;
    transition: 0.4s;
}

这会将样式应用于：

.bar1，当container悬停时
.bar2，当container悬停时
.bar3，当container悬停时

编辑：起初我没有意识到bar1是其他两个的兄弟。更新了我的答案以应用基于container:hover的样式。

div翻转让子div更改颜色

1 个答案: