Изменить картинку у другого элемента.

Здравствуйте вновь, задачка оказалась мне не по зубам.

Мне необходимо изменить картинку у другого элемента при наведении на целевой и соответственно наоборот. Еще раз: необходимо взаимно менять картинки у разных элементов, при наведении на один из них.

Можно ли сделать это при помощи css? Пробовал использовать, т.н. соседние селекторы, но не могу понять почему они не работают.

Код двух элементов таков:

#access .menu-bg1 a, #access .menu-bg1 a:focus {
	background-repeat:no-repeat;
	background-position:0.5em 0.5em;
	padding:140px 0 0 65px;
	background-image:url('/logo-no.png');
	bottom: -75px;
	position: absolute;
	overflow: hidden;
	height: 0;
	right: 30px;
}

#access .menu-bg1 a:hover {
	background-image:url('/logo-yes.png');
}

#access .menu-logo a, #access .menu-logo a:focus {
	background-repeat:no-repeat;
	background-position:0.5em 0.5em;
	padding:140px 0 0 370px;
	background-image:url('/logo-booggy-1.png');
	bottom: -80px;
	position: absolute;
	overflow: hidden;
	height: 0;
	right: -365px;
}

#access .menu-logo a:hover {
	background-image:url('/logo-booggy-2.png');
}

Пытаюсь скрестить хотя бы один из них:

#access .menu-logo a:hover ~ #access .menu-bg1 a {
	background-image:url('/logo-yes.png');
}

Естественно не работает 🙁 Как сделать это правильно?

И еще сразу скажу, что использовать скрипты вряд ли получится, так как все заключено внутри функции wp_nav_menu, соответственно меню динамическое, поэтому вижу некоторую проблему в применении jquery/java скриптов.