jQuery、CSS 和兄弟选择器问题

Posted 2023-02-25

【中文标题】jQuery、CSS 和兄弟选择器问题

【英文标题】：jQuery, CSS & siblings selector problem

【发布时间】：2011-03-31 14:04:15

【问题描述】：

我正在尝试使用 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;

【问题讨论】：

你能更好地格式化你的代码吗？

【参考方案1】：

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

.parent > .child

或在您的代码中：

#mainNav li > a:hover