title: Child change when parent is hovered over
body: <p>I am trying to get a child element to change when the parent is hovered. I also want an attribute of that parent to change as well. I am trying to get the background color of <code>#action</code> to change and the color of the <code>a</code> or <code>h1</code> to change when <code>action</code> is hovered over. Is this possible?</p>
  
  <p>here is the html</p>
  
  <pre><code>&lt;section id="action" class="general"&gt;
      &lt;div class="container"&gt;
          &lt;a href="#"&gt;&lt;h1&gt;This text&lt;/h1&gt;&lt;/a&gt;
      &lt;/div&gt;
  &lt;/section&gt;
  </code></pre>
  
  <p>and here is the css. CSS is built using SASS that is why it is structured like that.</p>
  
  <pre><code>#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;
  }
  </code></pre>