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 li时，$('#nav-sub ul').css("background", "#380606");无法更改背景，如何修复它？

Answer 1

$('#nav-sub ul')将选择#nav-sub后代的任何UL。在你的html中，#nav-sub没有任何后代Uls，因此没有被选中。

也许你只想做：

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

或者可能

 $('#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");

或想要ul上的bg：

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

见这里：http://jsfiddle.net/KtCeA/5/

Answer 4

使用：hover选择器

使用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;
}

当悬停ul li时，Jquery悬停不能改变背景？

4 个答案: