title: CSS :: child set to change color on parent hover, but changes also when hovered itself
body: <p>I have an <code>&lt;a&gt;</code> with a <code>&lt;span&gt;</code> children. I have written some CSS which changes the border-color of the children when the parent is hovered, but it also changes the border-color when I hover the children, which it shouldn't.</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>a {
      padding: 50px;
      border: 1px solid black;
  }
  
  a span {
      position: absolute;
      top: 200px;
      padding: 30px;
      border: 10px solid green;
  }
  
  a:hover span {
      border: 10px solid red;
  }   </code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;a&gt;
      Parent text
      &lt;span&gt;Child text&lt;/span&gt;    
  &lt;/a&gt;</code></pre>
  </div>
  </div>
  </p>