当父母被徘徊时子女更改

Question

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

下面是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; 
} 

Answer 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; 
     } 
    } 
} 

Answer 2

这是你想要的吗？ DEMO

您能够做出这样的：

#action:hover { 
    background: yellow; 
} 

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

正如你可以看到我重复使用#action:hover伪类的。我说：

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

希望我帮了忙。

好， 莱昂纳多

Answer 3

你可以做同样的@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; 
      } 
     } 
    } 

} 

的&内＃动作引用父元素，换句话说就是＃动作本身。

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

这就像是说：“......当这个元素被盘旋时，将这些样式应用于它，并将这些样式应用于a和h1”。

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

希望它有帮助。

干杯！