Question

<ul id="nav">
   <li id="SubnavGrpTwo" class="navitem">
      <a class="panel"><span class="vcufon btnLabel">Main menu</span></a>
      <ul>
         <li id="itemOne">
            <a class="panel vcufon subMenu"><span>Submenu One</span></a>
         </li>
      </ul>
   </li>
   <li id="SubnavGrpThree" class="navitem">
       <a class="panel"><span class="vcufon btnLabel">Main menu</span></a>         
   </li>
</ul>

要点：我有下拉菜单，在悬停子菜单列表项上添加背景图像。 E.g

我目前正在使用以下jquery代码。

$(document).ready(function () {

$("#nav li ul li a").hover(function () { // on hover submenu list item                          
    $('#nav li').addClass('setHover') //Add class on main menu list item 
},(function(){
         $("#nav li").removeClass('setHover').fadeIn(1000); //Remove class from main menu list item 
   }));
});

问题：我需要在其他主菜单列表项

上删除此（setHover）类，但当前处于悬停状态的那个除外。

干杯！

Answer 1

我想你想要这个：

$("#nav li").not(this.parent()).removeClass('setHover').fadeIn(1000);

Answer 2

以下应该这样做..

$(document).ready(function () {
    $("#nav li ul li a").hover(function () { // on hover submenu list item
        $(this).closest('#nav > li').addClass('setHover').siblings().removeClass('setHover'); //Add class on main menu list item 
    },(function(){
        $(this).closest("#nav > li").removeClass('setHover').fadeIn(1000); //Remove class from main menu list item 
    }));
});

演示 http://jsfiddle.net/gaby/A4kB3/

Answer 3

好吧，我可能不明白你的问题，但这是我试图使用的：

$("#nav li ul li").hover(function() { // on hover submenu list item   
    $(this).addClass('setHover');
}, (function() {
    $("#nav li ul li").removeClass('setHover');
}));

您使用$（'＃nav li'）来设置类，但这会为所有#nav li添加一个类。

查看此jsFiddle实例：http://jsfiddle.net/PnSTH/

Answer 4

如何这样做：

#nav li a {
  /*styles...*/
}
#nav li a:hover
{
    background: url(http://placekitten.com/g/200/200) no-repeat center center;
}

道歉，如果我误解了，但这似乎是jQuery矫枉过正的事情你可以用一些CSS实现。

小提琴：http://jsfiddle.net/pKmzw/1/

Answer 5

这可以做你想要的事情

$(document).ready(function () {
    $("#nav li ul li a").mouseover(function () { // on hover submenu list item     
        $("#nav li").removeClass('setHover').fadeIn(1000); //Remove class from main menu list item
        $(this).parents("#nav li").addClass('setHover') //Add class on the main menu list item you want only
    });
});

显然你不想要一个悬停功能，你只需要第一部分，“鼠标悬停”，而不是“mouseleave”。我过去常常只为IE6提供支持，但现在你应该只使用CSS了。

如何从其他父li中删除添加的类？

5 个答案: