Question

我正在尝试使用jQuery创建一个滑动菜单，我的问题是来自主导航（悬停图像）的悬停css规则也适用于我的兄弟姐妹，即使我为他们制定了自己的css规则。

我需要兄弟姐妹只使用带有#FFF的文字而没有悬停图像。

现在代码非常糟糕，因为我已经尝试了很多属性来使其工作，但没有成功。

这是我的jQuery代码：

$(document).ready(function(){
$("#main-nav li a.main-link").click(function(){
    $("#main-nav li a.close").fadeIn();
    $("#main-nav li a.main-link").removeClass("active");                                                 
    $(this).addClass("active");                                      
    $("#sub-link-bar").animate({
        height: "40px"                     
    });
    $(".sub-links").hide();
    $(this).siblings(".sub-links").fadeIn();
});
$("#main-nav li a.close").click(function(){
    $("#main-nav li a.main-link").removeClass("active");                                                                                     
    $(".sub-links").fadeOut();
    $("#sub-link-bar").animate({
        height: "1px"                      
    });     
    $("#main-nav li a.close").fadeOut();
});

HTML

<div id="sub-link-bar"></div>
 <div id="main-handle">
  <ul id="main-nav">
   <li><a class="main-link" href="#">Main Link</a>
    <ul class="sub-links">
     <li><a href="#" title="test"> Sub Link</a></li>
    </ul>
   </li>
 </ul>
</div>

我的CSS

#main-nav {
margin: 0px 0px 0px 0px;
padding-top: 10px;
padding-left: 0px;
background-image: url(../images/menu.png);
background-repeat: repeat-x;
height: 41px;
width: 100%;
list-style:none;
color:#306295;
}

#main-handle {
width: 100%;
float: right;
margin-top: -1px;
}
#main-nav li {
display: inline;
list-style: none;
}
#main-nav li a {
font-size: 12px;
text-decoration: none;
font-family:Verdana, Geneva, sans-serif;
font-weight:bold;
outline: 0;
height: 41px;
color:#306295;
text-align: left;
padding:13px 16px 13px 16px;
}
#main-nav li a:hover, #main-nav li a.active {
background-image: url(../images/bg-main-nav-hover.jpg);
text-align: left;
padding:13px 16px 13px 16px;
color:#FFF;
height: 41px;
background-position: center;
}
#sub-link-bar {
background: #476192;
background-image: url(../images/sub-bar-bg.png);
background-repeat: repeat-x;
min-height: 1px;
border-bottom: #645546 1px solid;
}
.sub-links {
display:none;
position: absolute;
width: 100%;
top: 113px;
text-align: left;
left: -40px;
}
.sub-links ul li a{
color:#FFF;
font-family: Verdana, Geneva, sans-serif;
font-size: 12px;
font-weight: normal;
background-image: none;
}
.sub-links li a:hover{
color: #e0e0e0;
text-decoration:none;
background-image: none;
}
#main-nav li a.close{
display: none;  
position: absolute;
color:#fff;
}
#main-nav li a.close:hover{
background: #900;
}

Answer 1

如果您只想将规则应用于直接子项，请在CSS中使用它：

.parent > .child

或在您的代码中：

#mainNav li > a:hover {

}

jQuery，CSS＆amp;兄弟姐妹选择器问题

1 个答案: