title: CSS Div link text underline hover
body: <p>I have a simple div like this...</p>
  
  <pre><code>&lt;a href="#"&gt;
    &lt;div class="promo-box promo-1"&gt;
      &lt;div class="promo-content"&gt;
       &lt;h2&gt;Heading here&lt;/h2&gt;
       &lt;p&gt;Text content here.&lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/a&gt;
  </code></pre>
  
  <p>...which allows me to change background color on div hover.
  Works great, but as a result, I get the text inside the link showing an underline on hover.
  I have tried several ways to target the h2 and p, but still can't get rid of the text-decoration on hover.</p>
  
  <p>Any ideas on what html element i need to target to apply text-decoration: none ?</p>
  
  <p>CSS here...</p>
  
  <pre><code>.promo-box
  {
  text-align:center;
  border-radius:5px;
  padding:10px;
  margin-bottom:20px;
  min-height:240px;
  }
  h2
  {
  font-family:Lato, Arial, Helvetica, sans-serif;
  font-weight:700;
  color:#FFF;
  font-size:20px;
  text-decoration: none;
  }
  .promo-box p
  {
  font-family:'Open Sans', Arial, Helvetica, sans-serif;
  font-weight:400;
  color:#FFF;
  font-size:16px;
  line-height:16px;
  }
  .promo-1
  {
  background-color:#125595;
  }
  div.promo-1:hover;
  }
  </code></pre>