прямая связь ссылок и элементов при наведении

[ufaclub]

есть ссылки вида:

<a  href="#id1">1</a>
<a  href="#id2">2</a>
<a  href="#id3">3</a>
..........................
<a  href="#id9">9</a>

тут же рядом svg код

<a><path id="shop1" stroke="none" d="XXX"></path></a>
<a><path id="shop2" stroke="none" d="XXX"></path></a>
<a><path id="shop3" stroke="none" d="XXX"></path></a>
<a><path id="shop4" stroke="none" d="XXX"></path></a>

как сделать что при наведении например на ссылку #id1 к path id="shop1" присваивался class="active" а после отвода мышки убирался class="active".

Помогите пожалуйста.

[j0hnik]

<a href="#id1">1</a>
<a href="#id2">2</a>
<a href="#id3">3</a>
	
<a><path id="shop1" stroke="none" d="XXX"></path></a>
<a><path id="shop2" stroke="none" d="XXX"></path></a>
<a><path id="shop3" stroke="none" d="XXX"></path></a>
<script>
	
$('a[href^="#id"]').each(function(){
	$(this).hover(function(){
		$('#shop'+this.href.match(/\d+$/)).toggleClass('active');
	});
});
	
		</script>