Question

I want to hover the space in each rectangle changing the background color and the color, but not changing it when you hover the text in other column. Did that make sense?
Example: Hover on “About” and not “Home” or “Contact” when hovering the text.

I really don’t know how to explain this well, so if you please check this fiddle you’ll see my problem.

Answer 1

For modern browsers use:

#bighome,#bigabout,#bigcontact {
  pointer-events: none;
}

Or the most compatible way is to put the #bigxxxx spans outside the a-element. So

<li id="contactlink"><a href="#">Contact</a><span id="bigcontact">contact</span></li>

(you have to specify the font-color for the spans)