title: How can i apply a:hover CSS to H2, which is inside the same anchor tag?
body: <p>This was really tough to phrase the question. I hope it's good enough.</p>
  
  <p>I have an <code>H2</code> inside of an <code>a</code> tag and am having problems with the <code>:hover</code> behavior of each. The <code>H2</code> wrapping around all <em>except</em> the word "View" is what my client wants. </p>
  
  <p>What is happening, is after the H2 CSS i created, the "View" and the "Mad Science of Colorado Coupon" are both turning white on <code>:hover</code>, but when you hover over the <code>a</code>, only the word "View" is changing, not the entire link. If you hover over the other words, the entire link is changing.</p>
  
  <p>How can i better code this as to have the everything inside the <code>anchor</code> change to <code>#fff</code> when you hover over any part of it?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.coupon-box {
    float: left;
    width: 100%;
    background: none repeat scroll 0 0 #ffff9d;
    text-align: center;
    color: #6c6c6c;
    font-size: 14px;
    border-top: 1px solid #d7d7d7;
    cursor: pointer;
  }
  
  .coupon-box:hover {
    background: #ff6138 none repeat scroll 0 0;
    color: #fff;
    transition: all 0.2s ease 0s;
  }
  
  a {
    cursor: pointer;
    color: #6c6c6c;
    color: #6c6c6c;
    cursor: pointer;
    float: left;
    padding: 5px 0;
    width: 100%;
    text-decoration: none;
  }
  
  
  /*  h2  */
  
  h2.coupon-wrapper {
    float: none;
    width: auto;
    color: #6c6c6c;
    background-color: transparent;
    font-family: 'Segoe UI';
    padding: 0;
    margin: 0;
    display: inline;
    text-transform: none;
    font-size: 14px;
  }
  
  
  /*Hover for h2 and a */
  
  a:hover,
  h2.coupon-wrapper:hover {
    background: #ff6138 none repeat scroll 0 0;
    color: #fff;
    transition: all 0.2s ease 0s;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>/* HTML */
  &lt;div class="coupon-box"&gt;
    &lt;table style="width:100%"&gt;
      &lt;tbody&gt;
        &lt;tr&gt;
          &lt;td style="height:60px;vertical-align:middle;text-align:center"&gt;
            &lt;a href="#"&gt;View &lt;h2 class="coupon-wrapper"&gt;Mad Science of Colorado Coupon&lt;/h2&gt;&lt;/a&gt;
          &lt;/td&gt;
        &lt;/tr&gt;
      &lt;/tbody&gt;
    &lt;/table&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>