由于CSS，jQuery兄弟姐妹选择器未附加类 [英] JQuery Sibling Selector not Appending Class because of CSS

问题描述

我也有一个带有子菜单子菜单的菜单，并且我试图基于悬停子菜单的<ul>容器，将一个类添加到子菜单的父菜单.

I have a menu with sub-menu child navigation as well, and I'm trying to append a class to the parent of the children based on the hovering of the children's <ul> container.

这是我到目前为止的内容: http://jsfiddle.net/2KhnX/15/

This is what I have so far: http://jsfiddle.net/2KhnX/15/

但是如您所见，该类永远不会被追加.如果我从HTML剥离了大部分CSS，但保留了我想附加的类，则可以正常工作- http ://jsfiddle.net/2KhnX/21/

but as you can see, the class never gets appended. If I strip most of the CSS from the HTML, but leave the class I'd like appended, it works fine - http://jsfiddle.net/2KhnX/21/

让我相信CSS正在冲突或破坏了JQuery试图执行的事件.我的猜测可能是因为我使用CSS的parent > child规则，或者可能是因为.sub-menu的初始属性为display:none.我不知道，我只知道CSS是搞乱这件事，或者说我没有使用适当选择的，因为的的CSS.

Which leaves me to believe that the CSS is conflicting or ruining the event that the JQuery is attempting to carry out. My guess would be because I'm using the parent > child rules of CSS, or perhaps because .sub-menu has an initial property of display:none. I'm not sure, I just know that the CSS is messing this up, or that I'm not using the appropriate selector because of the CSS.

任何见识将不胜感激，因为我迷路了.

Any insight would be greatly appreciated, for I am lost.

推荐答案

这是有问题的CSS:

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

那些第一个选择器比.parenthovered选择器具有更高的特异性 ，因此处于优先地位.您可以通过几种方式解决此问题；一种方法是在第一组选择器上不太具体，而在第二个选择器上更具体:

Those first selectors have a higher specificity than the .parenthovered selector, and thus are taking precedence. You can address this in a few ways; one way is to be less specific on the first set of selectors, and more specific on the second selector:

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

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

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

Of course, you'll have to choose selectors that make sense for the rest of your page...

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

此外，删除此行也可以:

Also, removing this line works too:

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

这篇关于由于CSS，jQuery兄弟姐妹选择器未附加类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！