a:active background image? - css

Question

At my website I would like to make the dots in the side change when I'm on the active div box. The hover works fine, but I can't get the active to work. The path for the image is worked fine, when I tried to put it under hover.
#nav{
z-index: 5;
position: fixed;
top: 50%;
right: 20px;
}
#nav li {
position: relative;
height: 20px;
width: 20px;
margin-bottom: 15px;
}
#nav li a {
display: block;
width: 20px;
height: 20px;
text-indent: -9999px;
background: transparent url('images/dot.png') no-repeat;
opacity: 0.80;
}
#nav li a:hover {
opacity: 1;
}
#nav li a:active {
background: transparent url('images/dotactive.png') no-repeat;
}

Answer 1

I don't think it's possible for the image to stay as the active background with just CSS alone. You will need to use a combination of javascript too.
With jQuery you could try something like the below.
.active{background: url('images/dotactive.png') no-repeat !important;}
$('#nav li a').live('click',function () {
$('.active').removeClass('active');
$(this).addClass('active');
});​
EDIT A Workign fiddle of your site keeping the active nav background images. http://jsfiddle.net/ukCG8/

Answer 2

try this out
background: url('images/dotactive.png') no-repeat;
no need for transparent
or use opacity also for tranparency

Answer 3

Try this:
<script language="JavaScript" type="text/javascript">
/*<![CDATA[*/
var Lst;
function CngClass(obj){
if (Lst) Lst.className='';
obj.className='selected';
Lst=obj;
}
/*]]>*/
</script>
And modify the li items like this:
<li>
<a onclick="CngClass(this);" href="#">Test 1
</a>
</li>
I wish I could take credit for the fix; check it out in action here (yes, I'm cheating on stackOverflow with another web dev site!)