title: Change css on hover of sibling element
body: <p>I'm trying to use a CSS <code>:hover</code> selector to change CSS on a sibling element. In this case I'm trying to change it to <code>display: none;</code></p>
  
  <p>The elements are setup like this.</p>
  
  <pre><code>&lt;div id="test" class="logo"&gt;
    &lt;a href="#"&gt;
      &lt;img src="http://demandware.edgesuite.net/aagb_prd/on/demandware.static/-/Sites-DK-Library/default/dwa0382f45/selected/UNISEX/SELECTED_FEMME_HOMME_logo.png" style="width: 200px;height:40px;"&gt;
    &lt;/a&gt;
  &lt;/div&gt;
  &lt;div class="menu__dropdown--femme" style="text-align: right;"&gt;
    &lt;a href="" class="menu__dropdown__link--femme"&gt;SHOP FEMME&lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And the CSS:</p>
  
  <pre><code>.menu__dropdown--femme:hover #test.logo {
    display: none;
    height: 500px;
  }
  </code></pre>
  
  <p>I have made a codepen here where the issue can be reproduced:
  <a href="http://codepen.io/anon/pen/NNRoMr" rel="nofollow">http://codepen.io/anon/pen/NNRoMr</a></p>