Cufon嵌套悬停问题

Question

当使用多个列表和悬停状态时,"父"Cufon样式将替换该子项.在以下示例中,当您悬停第二级链接时,它将被替换为不同的权重.

我可以设置一个选项,以便嵌套样式保持不变或者这是Cufon中的错误/限制吗？

    <ul>
    <li><a href="#">Top Level</a></li>
    <li><a href="#">Top Level</a></li>
    <li><a href="#">Top Level</a><ul>
        <li><a href="#">Second Level</a></li>
        <li><a href="#">Second Level</a></li>
        <li><a href="#">Second Level</a></li>
    </ul>
    <li><a href="#">Top Level</a></li>
    <li><a href="#">Top Level</a></li>
</ul>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://github.com/sorccu/cufon/raw/master/js/cufon.js"></script>
<script type="text/javascript" src="http://github.com/sorccu/cufon/raw/master/fonts/Vegur.font.js"></script>


<script type="text/javascript">
    Cufon.replace('ul li a',{hover: true, fontWeight: 200});
    Cufon.replace('ul li ul a',{hover: true, fontWeight: 700}); 
</script>

Answer 1

首先解决方案:使用不会在元素集重叠的位置创建匹配项的选择器.

//selects only 1st level links
Cufon.replace('ul:has(ul) > li   a', { hover: true, fontWeight: 200});
//selects only 2nd level links
Cufon.replace('ul:not(:has(ul)) a', { hover: true, fontWeight: 700});

解释为什么你的选择器+ Cufon会产生问题

问题似乎源于你的选择器.

ul li a --> selects all 8 occurrences of <a>
ul li ul a --> selects only the 3 second-level occurrences of <a>

这意味着您实际上已fontWeight为第二级<a>-tags 指定了两次.遗憾的是,Cufon似乎并不仅仅应用具有最高CSS特异性的表达式,因此行为将取决于Cufon如何在内部存储多个匹配,如此.

经过几次测试后,Cufon似乎按照您调用replace()语句的相反顺序应用样式.例如

如果你这样做

Cufon.replace('ul li a',{hover: true, fontWeight: 200});
Cufon.replace('ul li ul a',{hover: true, fontWeight: 700});

所有链接将显示为蓝色,第二级链接具有fontWeight 700直到悬停,然后他们得到fontWeight 200设置.

如果您切换订单

Cufon.replace('ul li ul a',{hover: true, fontWeight: 700});
Cufon.replace('ul li a',{hover: true, fontWeight: 200});

最初所有链接都将具有fontWeight 200,第二级链接将在悬停时设置为700.

您会注意到行为会根据您的通话顺序而改变.

不确定

我不认识Cufon而且我真的不明白你想要做什么.特别是我不确定你是否要像你一样使用传入Cufon的选项,或者你实际上是想在悬停时设置fontWeight.

两者之间有区别

Cufon.replace('ul li a', { hover: true, fontWeight: 200 } );

和

Cufon.replace('ul li a', {
    hover: { fontWeight: 200 }
});

第一个设置fontWeight为200,如果元素悬停也将fontWeight设置为200,只有fontWeight在此期间更改时才会显着.

后者仅fontWeight在悬停时将元素的样式更改为200,并在元素不再悬停时移除重量.

我不确定你打算用哪一个.