Cufon嵌套悬停问题 [英] Cufon Nested Hover Problem

问题描述

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

When using multiple lists and hover states the 'parent' Cufon style replaces the child. In the following example, when you hover the Second Level link it will be replaced by a different weight.

有一个选项我可以设置，相同或者这是Cufon中的错误/限制？

Is there an option I can set so that the nested style stays the same or is this a bug/limitation within 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> -tags两次。可悲的是，Cufon似乎只适用于具有最高 CSS特性的表达式< a>因此，行为将取决于Cufon内部存储多个匹配像这样。

This means you have actually specified the fontWeight twice for the second-level <a>-tags. Sadly Cufon doesn't seem to apply only the expression which has the highest CSS specificity thus the behavior will depend on how Cufon internally stores multiple matches like this one.

经过几个测试后，似乎Cufon以相反的顺序应用样式 replace（）中的语句例如

After a few tests it seems that Cufon applies the styles in the reverse order you call the replace() statements in. e.g.

如果你这样做

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

所有链接将显示为蓝色，第二级链接有fontWeight 700直到hover， fontWeight 200 set。

All links will appear blue and the 2nd-level-links have fontWeight 700 until hovered, then they get fontWeight 200 set.

如果您切换订单

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

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

Initially all links will have fontWeight 200, the 2nd-level-links will get 700 set when hovered.

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

You notice the behavior changes depending on the order of your calls.

不确定

我不知道Cufon，我真的不明白你在做什么。特别是我不知道你是不是想使用传递给Cufon的选项，当你做，或者如果你实际上是只是设置fontWeight时悬停。

I don't know Cufon and I don't really understand what you are trying to do. Especially I'm not sure if you mean to use the options passed in to Cufon as you do or if you actually mean to just set fontWeight when hovering.

有一个

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

和

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

首先将 fontWeight 设置为200，if元素被hover也将fontWeight设置为200，如果 fontWeight 在此期间改变，则该字体才会显着。

The first sets fontWeight to 200 and if the element is hovered also sets the fontWeight to 200, which would only be noticeable if the fontWeight changed in the meantime.

后者仅将元素的样式更改为 fontWeight 200，而当元素不再悬停时，hover将删除重量。

The latter only changes the style of the element to fontWeight 200 while hovered and removes the weight when the element is no longer hovered.

我不知道你打算使用哪一个。

I'm not sure which one you intend to use.

这篇关于Cufon嵌套悬停问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！