I have a tags within li tags like this:

 
<li class="equipment"><a  href="equipment/.../...">Hurricane</a></li>

Once CSS is applied, the text is centered below the li which is an image. I have top padding on the a tag extended upward over the image so that the entire thing is clickable for the link.

Now I am trying to enhance my navigation so that onmouseover the image switches with one that has a downward pointing arrow (which goes right over the text from the a tag) and points at a box which contains different links depending on which li you mouse over.

My problem is that the downward arrows look silly when they cover just part of the text. I thought i had solved this by changing the visibility property of the a tag to none when I was mousing over the li, but I guess giving your a tag no visibility also means you lose the ability to click it... at least in my case.

Is there anyway I can make the text disappear and not lose the functionality of the a tag?

Also, just to be clear, I cannot make the text the same color as the background because only the tip of the arrow goes over the text--making only part of the word covered.

Thanks in advance!!

put a span around the text you want to "disappear" and toggle the colour of the span

Unfortunately, that won't work because the edges of the arrow are diagonal, so some of the letters would still half show. Any other options for hiding a link but still having it be active?

I found the solution! I don't know why i didnt think of this sooner... Change the font size really small so it all fits within the arrow! Thanks for your help!