Помогите с ссылками

[ale19]

Помогите пожалуйста реализовать скрипт...
Есть две группы с ссылками:
группа 1
<a href="http://1.ru" class="ee">Ссылка1</a>
<a href="http://2.ru" class="ee">Ссылка2</a>
<a href="http://3.ru" class="ee">Ссылка3</a>
...
и группа 2
<a href="http://1.ru" class="Ссылка1" title="1">Ссылка1</a>
<a href="http://2.ru" class="Ссылка2" title="2">Ссылка2</a>
<a href="http://3.ru" class="Ссылка3" title="3">Ссылка3</a>
...
Как при наведении курсора на ссылку из группы 1,она заменялась на ссылку из группы 2,а именно интерисует описание ссылки

При реализации следующего скрипта срабатывает только первая ссылка

e=document.getElementsByClassName('ee');
for(k=0; k<e.length;k++) { 
r=document.getElementsByClassName(e[k].innerHTML);
if(e[k].innerHTML == r[k].innerHTML){ e[k].title = r[k].title;
e[k].innerHTML = r[k].innerHTML
}}

[ale19]

Вернее,как сделать,чтоб скрипт срабатывал только при наведении на ссылку из группы 1

[monolithed]

<script type="text/javascript">
window.onload = function() {
    (function(a) {
        var i = a.length;
        while(i--) {
            a[i].style.color = a[i].className == 'class1' ? 'red' : 'green';
        }
    }(document.getElementById('div').getElementsByTagName('a')));
};
</script>
<div id="div">
    <a href="#" class="class1">Ссылка1</a>
    <a href="#" class="class1">Ссылка2</a>
    <br />
    <a href="#" class="class2">Ссылка1</a>
    <a href="#" class="class2">Ссылка2</a>
</div>

[ale19]

Спасибо за пример,но это не совсем то что я хотел бы
Группа ссылок №2 находится в стиле display:none (с возможностью редактирования),а группу №1 редактировать нет возможности
Поэтому хотелось бы чтоб при наведени на ссылку в группе 1 производилась её замена на соответствующую ей ссылку из блока 2 со своими уже стилями и параметрами описания