title: CSS, hover one element, affect another
body: <p>When i hover a "li a" can i then affect another element in plain CSS?</p>
  
  <p>becuase I'm trying to make a box slide in, as a background element, when hovering my link.
  Exactly like this sites navigation, just instead of when activated, it works with hover </p>
  
  <p><a href="http://www.zindhai.com" rel="noreferrer">http://www.zindhai.com</a></p>
  
  <p>this is my code</p>
  
  <pre><code>nav ul li a:hover{
      color: #C3E1FF;
      font-weight: 700;
  }
  
  nav ul li span:hover{
      -webkit-transform:translate(0px, 0px);
      -webkit-transition:all 0.5s ease-out;
      transition:all 0.5s ease-out;
  }
  
  nav ul li span{
      height:43px;
      width:300px;
      position: absolute;
      background-color:#47525D;
      -webkit-transform:translate(300px, 0px);
      -webkit-transition:all 0.5s ease-out;
      transition:all 0.5s ease-out;
      background-position:initial initial;
      background-repeat:initial initial;
  }
  </code></pre>
  
  <p>thanks in advance! </p>
  
  <p>This is how it looks now;</p>
  
  <p><a href="http://jsfiddle.net/mbyc3tf9/" rel="noreferrer">http://jsfiddle.net/mbyc3tf9/</a></p>