0

在我的网站上，当我在活动的 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;  
}
4

3 回答 3

0

我认为仅使用 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 小提琴保持活动的导航背景图像。http://jsfiddle.net/ukCG8/

于 2012-12-13T23:12:11.237 回答
0

试试这个

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

不需要透明

或使用不透明度也用于透明度

于 2012-12-13T23:20:51.653 回答
0

尝试这个：

<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>

我希望我能把修复归功于我；在这里查看实际情况（是的，我正在与另一个 Web 开发站点在 stackOverflow 上作弊！）

于 2012-12-13T23:28:43.493 回答