由于CSS，JQuery兄弟选择器不会附加类

Question

我有一个带子菜单子导航的菜单，我正在尝试根据孩子的<ul>容器的悬停将一个类附加到子项的父级。

这是我到目前为止所做的：http://jsfiddle.net/2KhnX/15/

但正如您所看到的，该类永远不会被追加。如果我从HTML中剥离大部分CSS，但是留下我想要追加的类，它可以正常工作 - http://jsfiddle.net/2KhnX/21/

这让我相信CSS正在发生冲突或毁掉JQuery试图执行的事件。我的猜测是因为我使用了CSS的parent > child规则，或者因为.sub-menu的初始属性为display:none。我不确定，我只知道CSS搞砸了，或者我没有使用适当的选择器因为的CSS。

任何见解都会非常感激，因为我迷失了。

Answer 1

这是令人讨厌的css：

ul.menu li a:link, ul.menu li a:visited {
        background: url('images/alink.jpg') top center repeat-x;
}
.parenthovered {
    /* stuff */
}

这些第一个选择器的specificity比.parenthovered选择器高，因此优先。你可以通过几种方式解决这个问题;一种方法是在第一组选择器上不那么具体，而在第二选择器上更具体：

a:link, a:visited {
        background: url('images/alink.jpg') top center repeat-x;
}

.menu a.parenthovered {
    /* stuff */
}

当然，您必须选择对页面其余部分有意义的选择器...

工作小提琴：http://jsfiddle.net/pabo/NR4yB/1/

此外，删除此行也有效：

background: url('images/alink.jpg') top center repeat-x;