jQuery的懸停不能改變背景時懸停UL LI嗎？

Question

我有一個示例代碼：

<ul id="nav"> 
    <li><a href="#">Home</a></li> 
    <li><a href="#">About &darr;</a> 
     <ul id="nav-sub"> 
      <li><a href="#">Home</a></li> 
      <li><a href="#">About &raquo;</a></li> 
      <li><a href="#">Clients</a></li> 
      <li><a href="#">Contact Us</a></li> 
     </ul>  
    </li>  
</ul> 

和jQuery

$(document).ready(function() { 

$("#nav li").hover(function(){ 
     $(this).find('ul:first').css({visibility: "visible",display: "none"}).show(400); 
     $('#nav-sub ul').css("background", "#380606"); 
     },function(){ 
     $(this).find('ul:first').css({visibility: "hidden"}); 

     }); 
}); 

當我徘徊UL李，$('#nav-sub ul').css("background", "#380606");無法改變的背景下，如何解決呢？

Answer 1

$('#nav-sub ul')將選擇#nav-sub的後代的任何UL。在你的html中，#nav-sub沒有任何後裔Uls，所以沒有選擇。

也許你只想做：

$('#nav-sub').css("background", "#380606"); 

或poossibly

$('#nav-sub li').css("background", "#380606"); 

Answer 2

它不是ul應該li如下

$('#nav-sub li').css("background", "#380606"); 

Answer 3

你只是試圖做類似的東西這對於li的每個BG：

$('ul#nav-sub li').css("background", "#380606"); 

或想BG在ul：

$('ul#nav-sub').css("background", "#380606"); 

在這裏看到：http://jsfiddle.net/KtCeA/5/

Answer 4

這是非常簡單的用CSS做：懸停選擇

http://jsfiddle.net/2kguw/1/

ul#nav li{ 
    background: #FFFFFF; 
} 
ul#nav li:hover{ 
    background: #380606; 
} 

或： http://jsfiddle.net/2kguw/3/

ul#nav li{ 
    background: #FFFFFF; 
} 
ul#nav li:hover{ 
    background: #380606; 
} 

ul#nav-sub{ 
    display:none; 
} 
li#about:hover ul#nav-sub{ 
    display:block!important; 
}