将鼠标悬停在父级上时子级更改答案

【问题标题】：Child change when parent is hovered over将鼠标悬停在父级上时子级更改
【发布时间】：2013-06-24 07:51:31
【问题描述】：

我试图在父元素悬停时更改子元素。我也希望该父级的属性也发生变化。我试图让#action 的背景颜色发生变化，a 或h1 的颜色在action 悬停时发生变化。这可能吗？

这里是html

<section id="action" class="general">
    <div class="container">
        <a href="#"><h1>This text</h1></a>
    </div>
</section>

这里是css。 CSS 是使用 SASS 构建的，这就是它的结构。

#action {
    background-color: $bgLight;
    border-top: 1px solid #252525;
    -webkit-transition: all 0.2s ease-out;
    -moz-transition: all 0.2s ease-out;
    -ms-transition: all 0.2s ease-out;
    -o-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;

    a {
        text-decoration: none;

        h1 {
            margin: 0;
            color: $colorLight;
            font-weight: 300;
            text-align: center;
        }
    }
}

#action:hover a {
    background-color: #76A7D1;
    color: $colorDark;
}

【问题讨论】：

标签： html css sass

【解决方案1】：

试试这个：

#action {
    background-color: $bgLight;
    border-top: 1px solid #252525;
    -webkit-transition: all 0.2s ease-out;
    -moz-transition: all 0.2s ease-out;
    -ms-transition: all 0.2s ease-out;
    -o-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;

    a {
        text-decoration: none;

        h1 {
            margin: 0;
            color: $colorLight;
            font-weight: 300;
            text-align: center;
        }
    }
}

#action:hover{
    background-color: #76A7D1;
    a{
       h1{
          color: $colorDark;
       }
     }
}

【讨论】：

不客气！接受答案以帮助其他人解决您的问题:)

【解决方案2】：

您可以按照@Alessandro Minoccheri 的建议执行相同的操作，但可以采用我特别喜欢的不那么冗长的方式：

#action {
    background-color: $bgLight;
    border-top: 1px solid #252525;
    -webkit-transition: all 0.2s ease-out;
    -moz-transition: all 0.2s ease-out;
    -ms-transition: all 0.2s ease-out;
    -o-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;

    a {
        text-decoration: none;

        h1 {
            margin: 0;
            color: $colorLight;
            font-weight: 300;
            text-align: center;
        }
    }
    &:hover{
        background-color: #76A7D1;
        a{
           h1{
              color: $colorDark;
           }
         }
    }

}

#action 中的& 指的是父元素，即#action 本身。

我喜欢这种方法，因为所有内容都包含在一个样式声明中，并且重复性较低。

这就像说：“......当这个元素被悬停时，将这些样式应用到它，并将这些样式应用到 a 和 h1”。

关于您的标记@zachstames 的一个小评论：a（锚元素）是内联内容元素，而 h1（1 级标题）是块元素。根据W3C specifications，内联元素不应包含块元素，而应仅包含数据。

希望对你有帮助。

干杯！

【讨论】：

【解决方案3】：

这就是你想要的？ DEMO

你可以做到：

#action:hover {
    background: yellow;
}

#action:hover a {
    background-color: #76A7D1;
    color: white;
}

如您所见，我重复使用伪类#action:hover。我是说：

“当动作悬停时，改变它的背景AND当动作悬停时，改变a元素的背景和字体颜色”。

希望我有所帮助。

做个好人，莱昂纳多

【讨论】：