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/