Как навести несколько элементов только с одной фиксированной ссылкой

Question

Я создал ссылку на номер 1, которая имеет собственную ширину и высоту, поэтому она охватывает все буквы A, B, D, E (все ли связаны друг с другом).

Пример изображения: http://i.imgur.com/anuoGnJ.jpg

Что я не могу сделать, это поставить эффект фона при наведении на A, B, D, E буквами, так как ссылка на номер 1 накрывает его высота и ширина их все.

Есть ли способ, которым я могу это достичь? Я должен оставаться ограниченным, чтобы использовать только одну ссылку.

Большое спасибо.

Мой код:

HTML:

<span class="one"><a href="#">1</a></span> <span class="two">2</span> 
<ul> 
<li> 
<span class="letter">A</span> <span class="letter">B</span> 
</li> 

<li> 
<span class="letter">D</span> <span class="letter">E</span> 
</li> 
</ul> 

CSS:

.one {float:left;} 
.one a {float:left;position:relative;width:100px;height:60px;display:block;} 
.letter {float:left;color:#000;} 
.letter:hover {background:#ff0000;} 

Answer 1

Ok.That оно. http://jsfiddle.net/HECKM/3/

jQuery получит значение атрибута .ONE href и применится к LI внутри UL.

$(document).ready(function(){ 

    var url = $('.one a').attr('href'); 

    $('ul.test li').click(function(){ 
     window.location = url; 
    }); 
}); 

Просто подготовьтесь к использованию.

Cya.