title: CSS shape and text hover change color
body: <p>I have looked around and cannot find an answer for this, maybe I am just making my code too convoluted.</p>
  
  <p>I have a div that is making up my menu links.  The wrapper div will be a link that contains a div for my CCS Circle and a span for my link text:</p>
  
  <pre><code>&lt;div class="menu-item"&gt;
      &lt;a href="#"&gt;
          &lt;div class="menu-circle"&gt;&lt;/div&gt;
              &lt;span class="menu-text"&gt;Home&lt;/span&gt;
          &lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I am trying to make it so that when I hover ANYWHERE over the wrapper div it changes the color of the shape AND link.  So far I have only been able to manage individual hovers on the shape OR the link.</p>
  
  <p>my CSS is:</p>
  
  <pre><code>.menu-circle {
      width: 60px;
      height: 60px;
      background: black;
      -moz-border-radius: 50%;
      -webkit-border-radius: 50%;
      border-radius: 50%;
      margin:auto;
  }
  
  .menu-text{
      font-family: 'Oswald', sans-serif;
      font-weight:700;
      letter-spacing: .07em;
  }
  
  .menu-circle:hover{
      background:#e7e7e7;
  }
  
  .menu-text:hover{
      color:#e7e7e7;
  }
  
  .menu-item{
      text-align:center;
  }
  </code></pre>
  
  <p>you can see the example <a href="http://jsfiddle.net/9qg3vjm3/" rel="nofollow">here</a></p>