Cufon嵌套悬停问题

Question

当使用多个列表和悬停状态时，“parent”Cufon样式将替换子元素。在下面的示例中，当您悬停第二级链接时，它将被替换为不同的权重。

有没有我可以设置的选项，使嵌套样式保持不变，或者这是Cufon中的bug/限制？

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

这意味着您实际上已经为第二级<a>-tags指定了两次fontWeight。不幸的是，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，并在元素不再悬停时移除权重。

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