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。遗憾的是，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，并在元素不再悬停时删除粗细。

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