Зависимость неродственных классов

Question

[Денис]

Добрый день, есть такая разметка.

<div>
	<ul>
		<li><a href="#" class="link1"></a></li>
		<li><a href="#" class="link2"></a></li>
		<li><a href="#" class="link3"></a></li>
		<li><a href="#" class="link4"></a></li>
		<li><a href="#" class="link5"></a></li>
	</ul>
</div>

<div>
	<img src="images/1.jpg" alt="" class="item1">
	<img src="images/2.jpg" alt="" class="item2">
	<img src="images/3.jpg" alt="" class="item3">
	<img src="images/4.jpg" alt="" class="item4">
	<img src="images/5.jpg" alt="" class="item5">
</div>

На все img сделано свойство display: none; Нужно сделать чтобы при наведении на пункты меню нужные изображения имели свойство display: block; Например если .link1:hover, то .item1{display: block} и так далее. Как такое возможно сделать?

Comments

[Никита Гущин]

вряд-ли на чистом css такое можно сделать .. только если вручную каждый такой переход написать

Answer 1

[Сергей Мельников]

jsfiddle.net/XGaLJ

Answer 2

[Борис Шепелев]

$('ul li a').hover(
function() {
$bshepelev = $(this).parent().index();
$('div.image img').eq($bshepelev + 1).show();
}, function() {
$('div.image img').eq($bshepelev + 1).hide();
});

Использован алгоритм без классов! по ИНДЕКСУ

<div>
<ul>
<li><a href="#" class="link1" rel="item1">1</a></li>
<li><a href="#" class="link2" rel="item2">2</a></li>
</ul>
</div>

<div class="image">
<img src="..." alt="" class="item1">
<img src="..." alt="" class="item2" />
</div>

$('ul li a').hover(
function() {
$bshepelev = $(this).attr('rel');
$('.' + $bshepelev).show();
}, function() {
$('.' + $bshepelev).hide();
});

Вон использование через атрибут "REL" т.е. в ссылке в атрибут задаем имя класса картинки! Но мне кажется более практично использовать первый код, так как он не потребует ничего дополнительно, а элементы без лишних классов