title: How to hover multiple elements with only one fixed link
body: <p>I've create a link on number 1, which has it's own width and height, so it covers all A,B,D,E letters (all li's are linkable).</p>
  
  <p>Sample image: <a href="http://i.imgur.com/anuoGnJ.jpg" rel="nofollow">http://i.imgur.com/anuoGnJ.jpg</a></p>
  
  <p>What i cannot do is to put a background hover effect on A,B,D,E letters, because the link on number 1 covers with it's height and width all of them.</p>
  
  <p>Is there a way i can achieve this? I must stay limited to use only one link.</p>
  
  <p>Thanks a lot in advance.</p>
  
  <p>My code is:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;span class="one"&gt;&lt;a href="#"&gt;1&lt;/a&gt;&lt;/span&gt; &lt;span class="two"&gt;2&lt;/span&gt;
  &lt;ul&gt;
  &lt;li&gt;
  &lt;span class="letter"&gt;A&lt;/span&gt; &lt;span class="letter"&gt;B&lt;/span&gt; 
  &lt;/li&gt;
  
  &lt;li&gt;
  &lt;span class="letter"&gt;D&lt;/span&gt; &lt;span class="letter"&gt;E&lt;/span&gt;
  &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.one {float:left;}
  .one a {float:left;position:relative;width:100px;height:60px;display:block;}
  .letter {float:left;color:#000;}
  .letter:hover {background:#ff0000;}
  </code></pre>