css - :active background image?

Question

在 my website当我在事件的 div 框上时，我想让侧面的点发生变化。悬停效果很好，但我无法主动工作。当我试图将其悬停时，图像的路径工作正常。

#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

我认为仅靠 CSS 不可能使图像保持为事件背景。您还需要结合使用 javascript。

使用 jQuery，您可以尝试如下所示的操作。

.active{background: url('images/dotactive.png') no-repeat !important;}

$('#nav li a').live('click',function () {
   $('.active').removeClass('active');
   $(this).addClass('active');
});​

编辑 您网站的 Workign fiddle ，保留事件导航背景图像。 http://jsfiddle.net/ukCG8/