在使用多个列表和悬停状态的“父”的Cufón风格取代了孩子。在下面的示例中,当将光标悬停第二级链路它将由一个不同的权重替换。

有没有我能设置使得嵌套的风格保持不变或距离的Cufón这样的错误/限制的选项?

    <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});

结果


,点击 解释为什么你选择+的Cufón产生问题

这个问题似乎从你选择发起。

ul li a --> selects all 8 occurrences of <a>
ul li ul a --> selects only the 3 second-level occurrences of <a>

这意味着你实际上已经指定的fontWeight两次用于第二级<a>标签。可悲的Cufón似乎并不只适用于具有最高 CSS特异性因此行为将取决于如何的Cufón内部存储多个匹配像这样的

一些测试之后,它似乎的Cufón应用样式调用replace()声明相反的顺序。e.g。

如果您

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

所有的链接将显示蓝色,而2级链路具有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组

您注意根据您的通话秩序的行为变化。 结果


结果

<强>不确定

我不知道的Cufón,我真的不明白你正在尝试做的。尤其是我不知道,如果你的意思是使用传递给的Cufón为你做的选项,或者如果你实际上意味着盘旋时,只需设置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而徘徊,并删除当所述元件不再徘徊的重量。

我不知道要使用哪一个。

scroll top