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>两次。可悲的是，Cufon似乎并不仅仅应用具有最高CSS specificity的表达式，因此行为将取决于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，并在元素不再悬停时移除重量。

我不确定你打算使用哪一个。

Cufon嵌套悬停问题

1 个答案: