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

编辑您网站的工作小提琴，保留有效的导航背景图像。 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>

我希望我能为这次修复赢得赞誉;在行动here中查看它（是的，我在另一个网络开发站点上欺骗stackOverflow！）

a：活动背景图片？

3 个答案: