3

我试图在父元素悬停时更改子元素。我也希望该父级的属性也发生变化。我正在尝试获取要更改的背景颜色和鼠标悬停时要更改的或#action的颜色。这可能吗？ah1action

这是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;
}
4

3 回答 3

4

尝试这个：

#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;
       }
     }
}
于 2013-06-23T16:34:36.197 回答
1

您可以像@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 规范，内联元素不应包含块元素，而应仅包含数据。

希望能帮助到你。

干杯!

于 2013-06-23T23:51:31.647 回答
0

这就是你想要的？演示

你可以做到这一点：

#action:hover {
    background: yellow;
}

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

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

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

希望我有所帮助。

做个好人，莱昂纳多

于 2013-06-23T16:44:59.210 回答