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

Помогите пожалуйста с написанием чистого JS

Дано:
<div class="info">
<a href="#"><span>Текст 1</span></a>
<a href="#"><span>Текст 2</span></a>
<a href="#" class="active"><span>Текст 3</span></a>
<a href="#"><span>Текст 4</span></a>
</div>

<style>
.info a span { display:none; }
.info a:hover span, .info a.active span { display:block; }
</style>

Задача:
При наведении на любую ссылку кроме a.active, a.active span должен исчезнуть { display:none; }.

P.S.:
При наведении на ссылку a.active, ничего не должно происходить, то есть оставаться: a:hover.active span { display:block; }

Подробные рассуждения тут: http://ru-webdev.livejournal.com/3177165.html

Вот как это понять? :)
Ведь класс active есть не у "любой" ссылки...