A:活动背景图片？

Question

在my website，当我在活动的div框中时，我想让侧边的点发生变化。悬停工作正常，但我不能让active工作。当我试图将图像置于悬停状态时，图像的路径工作得很好。

#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');
});​

EDIT站点的工作小提琴，保持活动的导航背景图像。http://jsfiddle.net/ukCG8/

Answer 2

试试这个

    background: url('images/dotactive.png') no-repeat; 

不需要透明的

或者也可以使用不透明度来提高透明度

Answer 3

试试这个：

<script language="JavaScript" type="text/javascript">
/*<![CDATA[*/
var Lst;

function CngClass(obj){
 if (Lst) Lst.className='';
 obj.className='selected';
 Lst=obj;
}

/*]]>*/
</script>

并像这样修改li项：

<li>
<a onclick="CngClass(this);" href="#">Test 1
</a>
</li> 

我希望我可以获得修复的功劳；在action here中查看它(是的，我在stackOverflow上欺骗了另一个web开发网站！)