title: hover on child without hover effect on parent
body: <p>So I have 2 <code>div</code>'s they're in each other so like this</p>
  
  <pre><code>&lt;div class="parent"&gt;
      &lt;div class="child"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and I want to change the <code>background</code> from <code>.parent</code> when I hover over <code>.parent</code>.</p>
  
  <p>but I want the <code>background</code> to turn normal again when I hover over <code>.child</code>. </p>
  
  <p>so for example: <em>(or <a href="http://jsfiddle.net/k3Zdt/1/" rel="noreferrer">http://jsfiddle.net/k3Zdt/1/</a> )</em></p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.parent {
      transition:background-color 1s;
      width:100px;
      height:100px;
      background:#3D6AA2;
      padding:50px;
  }
  
  .parent:hover {
      background:#FFF;
  }
  
  .child {
      height:100px;
      width:100px;
      background:#355E95;
      transition:background-color 1s;
  }
  
  .child:hover {
      background:#000;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="parent"&gt;
      &lt;div class="child"&gt;
      &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>When I hover over the darkblue area I want the not-so-darkblue area to stay not-so-darkblue instead of changing to white.</p>
  
  <p>I would like to keep this <code>&lt;div&gt;</code> structure. and I dont want a JavaScript solution (I know the JavaScript solution but I want to keep it pure CSS). </p>