title: CSS hover div and link at the same time
body: <p>This forum is great and saved me tons of time already,<br>
  It's a relatively simple matter, but i've been cracking my head all day, and can't find a solution.</p>
  
  <p>It's essentially a div made to look like a "button", with size, background and borders defined.<br>
  I'm trying to get both the link and the div's borders/background to light up when hovering on it, to no avail.<br>
  I can only get one of them to change, either the link or the "button"<p>
  so the html:</p>
  
  <pre><code>&lt;div align="middle" class="main_button1"&gt;&lt;a href="/about/"&gt;Learn more&lt;/a&gt;&lt;/div&gt;
  </code></pre>
  
  <p>and the div style is:</p>
  
  <pre><code>.main_button1 {
      margin: auto;
      line-height: 2;
      width: 180px;
      border: 3px solid #98a2a7;
      padding: 10px;
      border-radius: 22px;
      background: white;
  }
  
  .main_button1 a {
      color: #98a2a7;
  }
  
  .main_button1 a:visited { 
      color: #98a2a7; 
  }
  </code></pre>
  
  <p>but whenever i try to define the hover effect:<br>
  <code>.main_button1:hover</code> won't affect the link<br>
  and<br>
  <code>.main_button1 a:hover</code> won't affect the div, only the link
  <p>
  here's my futile attempt, which only changes the div color and not the link</p>
  
  <pre><code>.main_button1:hover { 
      border: 3px solid #98a2a7;
      padding: 10px;
      border-radius: 22px;
      background: #98a2a7;
  
      a { color: red; }
  }
  </code></pre>
  
  <p><p>
  Any suggestions please oh wisemen (and wisewomen) ?<br>
  thanks in advance! </p>