title: Use :hover to modify the css of another class?
body: <p>Is there a way to modify the css for one class when hovering on an element from another class using only css ?</p>
  
  <p>Something like:</p>
  
  <pre><code>.item:hover .wrapper { /*some css*/ }
  </code></pre>
  
  <p>Only 'wrapper' is not inside 'item', it's somewhere else.</p>
  
  <p>I really don't want to use javascript for something this simple, but if I have to, how would I do it ? Here's my failed attempt:</p>
  
  <pre><code>document.getElementsByClassName('item')[0].onmouseover="document.getElementsByClassName('wrapper')[0].style.background="url('some url')";";
  </code></pre>
  
  <p>There's only one element of each class. Don't know why they didn't use IDs when they made the template, but that's just how it is and I can't change it.</p>
  
  <p>[Edit]</p>
  
  <p>It's a menu. Each menu element has a distinct class. When you hover on the element a submenu pops up to the right. It's like an overlay, when I use the 'Inspect Element' tool I can see that the whole website html changes when the submenu is active(meaning there's nothing but the submenu). The class I call 'wrapper' has the css that controls the background for the submenu. There's really no connection that I can see between the two classes.</p>