当使用多个列表和悬停状态时,“父”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>
最佳答案
解决方案优先:使用不会在元素集重叠的地方创建匹配项的选择器。
//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});
最初所有链接的字体权重都是 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 并在元素不再悬停时移除权重。
我不确定你打算使用哪一个。
关于jquery - Cufon 嵌套悬停问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/1825279/