I'm trying to create a UL/LI horizontal list with background images only, with no text link visible. The reason for this is so that when I over over a list
item, the background would rollover and when I click on it the current
item would toggle. basically it is a horizontal menu with background images that can be toggled; mimicking the job of a radio button.
I have done it like this;
<div id="options">
<ul id="list">
<li class="active"><a href="#" class="option1 active" id="link1"><span>XXXXX</span></a></li>
<li><a href="#" class="option2" id="link2"><span>XXXXX</span></a></li>
<li><a href="#" class="option3" id="link3"><span>XXXXX</span></a></li>
</ul>
</div>
The CSS for option1, option2 and option3 simply define the background image.
#options LI{list-style-type: none; display : inline}
a.option1{ background:url('../images/option1.png') no-repeat;}
a.option2{ background:url('../images/option2.png') no-repeat;}
a.option3{ background:url('../images/option3.png') no-repeat;}
a.option1, a.option2, a.option3{
background-position:top;
display:inline;
width:230px;
height:40px;
}
And the hover & active css part simply sets the background position like so-
a.option1:hover, a.option2:hover, a.option3:hover{
background-position:bottom;
}
a.active{
background-position:bottom !important;
}
This works fine, however on top of the background I get the words "XXXXX" as text links and I'm struggling to hide them. They are interfering with the hover action and preventing rollover (even if I replace XXXXX with a period or something short).
I can't just remove the text from the link as it would hide the whole LI element. I have tried to use
display:none; or text-indent:-999px
but then the whole UI element becomes invisible. I can't understand what I'm doing wrong.
Are you able to help?
Thanks
