Existe uma maneira de modificar o css para uma classe ao passar o mouse sobre um elemento de outra classe usando apenas css?

Algo como:

<code>.item:hover .wrapper { /*some css*/ }
</code>

Apenas 'wrapper' não está dentro de 'item', está em outro lugar.

Eu realmente não quero usar javascript para algo tão simples, mas se eu tenho que, como eu faria isso? Aqui está minha tentativa falhada:

<code>document.getElementsByClassName('item')[0].onmouseover="document.getElementsByClassName('wrapper')[0].style.background="url('some url')";";
</code>

Há apenas um elemento de cada classe. Não sei por que eles não usaram IDs quando criaram o modelo, mas é assim que é e não posso alterá-lo.

[Editar]

É um cardápio. Cada elemento do menu tem uma classe distinta. Quando você passa o mouse sobre o elemento, um submenu aparece à direita. É como uma sobreposição, quando eu uso a ferramenta 'Inspect Element' eu posso ver que todo o site html muda quando o submenu está ativo (ou seja, não há nada além do submenu). A classe que eu chamo de 'wrapper' tem o css que controla o background para o submenu. Não há realmente nenhuma conexão que eu possa ver entre as duas classes.